<link href='https://fonts.googleapis.com/css?family=Share+Tech|Orbitron:500' rel='stylesheet' type='text/css'>
<div class="startContainer">
<button class="button pulseText">Launch</button>
</div>
<div class="startContainer">
<button class="button pulseBox">Launch</button>
</div>
<div class="startContainer">
<button class="button pulseBox button3">Launch</button>
</div>
html
{
background-color: #000;
}
body
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/***********************************************************/
.startContainer
{
margin: 50px auto 0px auto;
text-align: center;
}
/***********************************************************/
.button
{
color: #6f6;
font-family: 'Orbitron', Verdana, sans-serif;
font-size: 2.2em;
background: none;
}
.button:hover
{
color: #afa;
cursor: pointer;
}
.button3
{
border-radius: 20px;
padding: 10px 15px;
color: #000;
font-weight: bold;
background: #66ff66;
background: -moz-linear-gradient(top, #66ff66 0%, #aaffaa 70%, #66ff66 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66ff66), color-stop(70%,#aaffaa), color-stop(100%,#66ff66));
background: -webkit-linear-gradient(top, #66ff66 0%,#aaffaa 70%,#66ff66 100%);
background: -o-linear-gradient(top, #66ff66 0%,#aaffaa 70%,#66ff66 100%);
background: -ms-linear-gradient(top, #66ff66 0%,#aaffaa 70%,#66ff66 100%);
background: linear-gradient(to bottom, #66ff66 0%,#aaffaa 70%,#66ff66 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ff66', endColorstr='#66ff66',GradientType=0 );
}
.button3:hover
{
color: #000;
background: #44ee44;
background: -moz-linear-gradient(top, #44ee44 0%, #aaffaa 70%, #44ee44 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#44ee44), color-stop(70%,#aaffaa), color-stop(100%,#44ee44));
background: -webkit-linear-gradient(top, #44ee44 0%,#aaffaa 70%,#44ee44 100%);
background: -o-linear-gradient(top, #44ee44 0%,#aaffaa 70%,#44ee44 100%);
background: -ms-linear-gradient(top, #44ee44 0%,#aaffaa 70%,#44ee44 100%);
background: linear-gradient(to bottom, #44ee44 0%,#aaffaa 70%,#44ee44 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44ee44', endColorstr='#44ee44',GradientType=0 );
}
/***********************************************************/
@-webkit-keyframes pulseBox {
0% {-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.6);}
100% {-webkit-box-shadow: 0px 0px 18px 0px rgba(0, 255, 0, 0.9);}
}
@-moz-keyframes pulseBox {
0% {-moz-box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.6);}
100% {-moz-box-shadow: 0px 0px 18px 0px rgba(0, 255, 0, 0.9);}
}
@-o-keyframes pulseBox {
0% {-o-box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.6);}
100% {-o-box-shadow: 0px 0px 18px 0px rgba(0, 255, 0, 0.9);}
}
@keyframes pulseBox {
0% {box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.6);}
100% {box-shadow: 0px 0px 18px 0px rgba(0, 255, 0, 0.9);}
}
.pulseBox {
-webkit-animation-name: pulseBox;
-moz-animation-name: pulseBox;
-o-animation-name: pulseBox;
animation-name: pulseBox;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
border: 0px;
}
/********************/
@-webkit-keyframes pulseText {
0% {text-shadow: 0px 0px 8px rgba(0, 255, 0, 0.7);}
100% {text-shadow: 0px 0px 22px rgba(0, 255, 0, 1);}
}
@-moz-keyframes pulseText {
0% {text-shadow: 0px 0px 8px rgba(0, 255, 0, 0.7);}
100% {text-shadow: 0px 0px 22px rgba(0, 255, 0, 1);}
}
@-o-keyframes pulseText {
0% {text-shadow: 0px 0px 8px rgba(0, 255, 0, 0.7);}
100% {text-shadow: 0px 0px 22px rgba(0, 255, 0, 1);}
}
@keyframes pulseText {
0% {text-shadow: 0px 0px 8px rgba(0, 255, 0, 0.7);}
100% {text-shadow: 0px 0px 22px rgba(0, 255, 0, 1);}
}
.pulseText {
-webkit-animation-name: pulseText;
-moz-animation-name: pulseText;
-o-animation-name: pulseText;
animation-name: pulseText;
-webkit-animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-o-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
border: 0px;
}
This Pen doesn't use any external CSS resources.