pulsing button
HTML
<div class="pulse-button-container">
<button class="pulse-button">Call In</button>
</div>
CSS
body {
background: black;
font-family: sans-serif;
color: #666;
text-align: center;
}
.Float{
float: right;
}.clear{
clear: both;
}
.pulse-button-container {
width: 300px;
height: 100%;
margin: 0 auto 0;
}
.pulse-button {
position: relative;
width: 150px;
height: 150px;
border: none;
box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
border-radius: 50%;
background-color: #dc2763;
color: white;
font-size: 30px;
cursor: pointer;
-webkit-animation: pulse 1.5s infinite cubic-bezier(0, 0, 0, 1);
-moz-animation: pulse 1.5s infinite cubic-bezier(0, 0, 0, 1);
-ms-animation: pulse 1.5s infinite cubic-bezier(0, 0, 0, 1);
animation: pulse 1.5s infinite cubic-bezier(0, 0, 0, 1);
}
.pulse-button:hover {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
@-webkit-keyframes pulse {to {box-shadow: 0 0 0 35px rgba(220,39,99, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 35px rgba(220,39,99, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 35px rgba(220,39,99, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 150px rgba(220,39,99, 0);}}