<div class='hotspot '>
  <div class="button-wrap">
    <button class='pulse-button'>+</button>
  </div>
</div>

body, html {
  margin: 0; padding: 0; background: #333;
}


.hotspot {
  margin: 100px;
  
  .button-wrap {
    display: table;  
  }
  
  .pulse-button {
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    position: relative;
    display: table-cell;
    width: 30px;
    height: 30px;
    font-size: 1.3em;
    font-weight: bold;
    color: #3a89de;
    border: none;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    border-radius: 100%;
    vertical-align: middle;
    background: #fff;
    cursor: pointer;
    -webkit-animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);

    &:hover {
      -webkit-animation: none;
      -moz-animation: none;
      animation: none;
    }
    
    &.deactivate {
      color: #000;
      background: #999;
      -webkit-animation: none;
      -moz-animation: none;
      animation: none;
    }
  }
}

@-webkit-keyframes pulse {
  to {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
  }
}

@keyframes pulse {
  to {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
  }
}