Пульсирующая кнопка на чистом CSS

<div class="container">
    <button class="pulse-button">+</button>
</div>

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