Pulsing Button

A simple HTML / CSS button with a pulsing effect. By Will Woodgate.

by spydmobile

HTML

<a href="http://example.com" class="cffdrs-active-button">Streaming Live</a>
<p>

</p>
<button class="cffdrs-active-button">
Push me please
</button>

CSS

/* Basic button styling */

.cffdrs-active-button {
  width: 220px;
  text-align: center;
  white-space: nowrap;
  display: block;
  margin: 50px auto;
  padding: 10px;
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  border-radius: 10px;
   background-color: #FF0000;
  -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  font-size: 22px;
  font-weight: normal;
  font-family: sans-serif;
  text-decoration: none !important;
  color: #ffffff;
  transition: all 300ms ease-in-out;
}


/* Comment-out to have the button continue to pulse on mouseover */

.cffdrs-active-button:hover {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
  background-color: #660000;
}


/* Animation */

@-webkit-keyframes pulsing {
  to {
    box-shadow: 0 0 0 5px rgba(232, 76, 61, 0);
  }
}

@-moz-keyframes pulsing {
  to {
    box-shadow: 0 0 0 5px rgba(232, 76, 61, 0);
  }
}

@-ms-keyframes pulsing {
  to {
    box-shadow: 0 0 0 5px rgba(232, 76, 61, 0);
  }
}

@keyframes pulsing {
  to {
    box-shadow: 0 0 0 5px rgba(232, 76, 61, 0);
  }
}