Pulse button animate

<div class="button-inner-container">
  <div class="button-inner-mask"></div>
  <div class="button-block">
    <div class="button-pulse button-pulse-animate"></div>
    <div class="button-inner-block">
      <div class="button-icon-container">
        <div class="button-inner-item button-icon-animation">
          <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 28">
            <path class="webform-icon" fill="#FFFFFF" fill-rule="evenodd" d="M815.406703,961 L794.305503,961 C793.586144,961 793,961.586144 793,962.305503 L793,983.406703 C793,984.126062 793.586144,984.712206 794.305503,984.712206 L815.406703,984.712206 C816.126062,984.712206 816.712206,984.126062 816.712206,983.406703 L816.712206,962.296623 C816.703325,961.586144 816.117181,961 815.406703,961 L815.406703,961 Z M806.312583,979.046143 C806.312583,979.454668 805.975106,979.783264 805.575462,979.783264 L796.898748,979.783264 C796.490224,979.783264 796.161627,979.445787 796.161627,979.046143 L796.161627,977.412044 C796.161627,977.003519 796.499105,976.674923 796.898748,976.674923 L805.575462,976.674923 C805.983987,976.674923 806.312583,977.0124 806.312583,977.412044 L806.312583,979.046143 L806.312583,979.046143 Z M813.55946,973.255747 C813.55946,973.664272 813.221982,973.992868 812.822339,973.992868 L796.889868,973.992868 C796.481343,973.992868 796.152746,973.655391 796.152746,973.255747 L796.152746,971.621647 C796.152746,971.213122 796.490224,970.884526 796.889868,970.884526 L812.813458,970.884526 C813.221982,970.884526 813.550579,971.222003 813.550579,971.621647 L813.550579,973.255747 L813.55946,973.255747 Z M813.55946,967.45647 C813.55946,967.864994 813.221982,968.193591 812.822339,968.193591 L796.889868,968.193591 C796.481343,968.193591 796.152746,967.856114 796.152746,967.45647 L796.152746,965.82237 C796.152746,965.413845 796.490224,965.085249 796.889868,965.085249 L812.813458,965.085249 C813.221982,965.085249 813.550579,965.422726 813.550579,965.82237 L813.550579,967.45647 L813.55946,967.45647 Z" transform="translate(-793 -961)"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
html.ios.ios-fix-frame-focus, .ios.ios-fix-frame-focus body {
  -webkit-overflow-scrolling: touch
}

.touch {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.button-inner-container {
  position: relative;
  display: inline-block;
  margin: 50px;

}

.button-block {
  width: 66px;
  height: 66px;
  border-radius: 100%;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer
}

.button-block .button-icon {
  opacity: 1
}

.button-block-active .button-icon {
  opacity: .7
}

.button-inner-block {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 66px;
  border-radius: 100px;
  background: #00aeef;
  box-sizing: border-box
}

.button-icon-container {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1
}

.button-inner-item {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px 19px;
  -webkit-transition: opacity .6s ease-out;
  transition: opacity .6s ease-out;
  -webkit-animation: socialRotateBack .4s;
  animation: socialRotateBack .4s;
  opacity: 0
}

.button-icon-animation {
  opacity: 1
}

.button-inner-mask {
  position: absolute;
  top: -8px;
  left: -8px;
  height: 82px;
  min-width: 66px;
  width: calc(100% + 16px);
  border-radius: 100px;
  background: #00aeef;
  opacity: .2
}

.button-icon {
  -webkit-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out;
  cursor: pointer
}

.button-icon:hover {
  opacity: 1
}

.button-inner-item-active .button-icon {
  opacity: 1
}

@-webkit-keyframes socialRotate {
  0% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}

@keyframes socialRotate {
  0% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}

@-webkit-keyframes socialRotateBack {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}

@keyframes socialRotateBack {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}


.button-pulse {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px solid #00aeef;
  border-radius: 50%
}

.button-pulse-animate {
  -webkit-animation: widgetPulse infinite 1.5s;
  animation: widgetPulse infinite 1.5s
}

@-webkit-keyframes widgetPulse {
  50% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }
  100% {
    -webkit-transform: scale(2, 2);
    transform: scale(2, 2);
    opacity: 0
  }
}

@keyframes widgetPulse {
  50% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }
  100% {
    -webkit-transform: scale(2, 2);
    transform: scale(2, 2);
    opacity: 0
  }
}

</style>