<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