<div class="container">
<button class="pulse-button">+</button>
</div>
CSS:
body, html {
height: 100%;
background: #f0f0f0;
}
.container {
width: 200px;
height: 100%;
margin: 0 auto 0;
}
.pulse-button {
position: relative;
top: 50%;
left: 50%;
margin-left: -20px;
margin-top: -20px;
display: block;
width: 40px;
height: 40px;
font-size: 1.3em;
font-weight: bold;
color: white;
text-shadow: 0 1px 0 #1f4c76;
border: 1px solid #3480c7;
box-shadow: 0 0 0 0 rgba(90, 153, 220, 0.7), inset 0 1px 0 #abcbe9;
border-radius: 100%;
v-align: middle;
background: #5a99d4;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6ea6d9), color-stop(100%, #468ccf));
background-image: -webkit-linear-gradient(#6ea6d9, #468ccf);
background-image: -moz-linear-gradient(#6ea6d9, #468ccf);
background-image: -o-linear-gradient(#6ea6d9, #468ccf);
background-image: linear-gradient(#6ea6d9, #468ccf);
cursor: pointer;
-webkit-animation: pulse 1s infinite cubic-bezier(0.6, 0, 0, 1);
}
.pulse-button:hover {
-webkit-animation: none;
}
@-webkit-keyframes pulse {
to {
box-shadow: 0 0 0 15px rgba(90, 153, 220, 0), inset 0 1px 0 #abcbe9;
}
}