<div class="container">
  <div class="stuff">
    <div class="button" tabindex="1">
      <span class="ion-help-circled"></span>
    </div>
    <div class="button" tabindex="2">
      <span class="ion-log-in"></span>
    </div>
    <div class="button" tabindex="3">
      <span class="ion-help-buoy"></span>
    </div>
    <hr />
    <h3>Pure CSS Click Effect</h3>
  </div>
  
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400);
@font-family: 'Roboto Condensed';
@charset "UTF-8";
body {
  background-color: tomato;
  color: darken(#fff, 20%);
  padding-top: 25%;
  text-align: center;
}
.stuff {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

h3 {
  font-family: @font-family;
  color: #fff;
  font-weight: 300;
}
.button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 0 auto;
  width: 70px;
  height: 70px;
  font-size: 52px;
  transition: all 0.4s ease-in;
  span[class^='ion'] {
    position: relative;
  }
  //start click effect
  &:before {
    content: '';
    background-color: aliceblue;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(0.001, 0.001);
  }
  &:focus {
    outline: 0;
    color: #fff;
    &:before {
      animation: effect_dylan 0.8s ease-out;
    }
  }
}
@keyframes effect_dylan {
  50% {
    transform: scale(1.5, 1.5);
    opacity: 0;
  }
  99% {
    transform: scale(0.001, 0.001);
    opacity: 0;
  }
  100% {
    transform: scale(0.001, 0.001);
    opacity: 1;
  }
}

View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js