<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js