Radial Click Effect
shows the radial click effect like in the material design, so when you click a button it will show a click at that area with a nice animation. Uses CSS and javascript to generate this effect.
CSS
/*
@import url('https://fonts.googleapis.com/css?family=Red+Hat+Display&display=swap');
* {
font-family: 'Red Hat Display', sans-serif;
}
*/
.ripplelink{
display:block;
float:left;
width:49.6%;
margin:0.2%;
height:10em;
line-height:10em;
text-align:center;
color:#fff;
text-decoration:none;
position:relative;
overflow:hidden;
transition: all 0.2s ease;
z-index:0;
}
.ink {
display: block;
position: absolute;
background:rgba(255, 255, 255, 0.3);
border-radius: 100%;
transform:scale(0);
}
.animate {
animation:ripple 0.65s linear;
}
@keyframes ripple {
100% {opacity: 0; transform: scale(2.5);}
}
.cyan{
background:#00bcd4;
}
.lightgreen{
background:#8bc34a;
}
.amber{
background:#ffc107;
}
.orange{
background:#ff9800;
}
JS
var links = document.querySelectorAll('.ripplelink');
for (var i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('click', function(e) {
var targetEl = e.target;
var inkEl = targetEl.querySelector('.ink');
if (inkEl) {
inkEl.classList.remove('animate');
}
else {
inkEl = document.createElement('span');
inkEl.classList.add('ink');
inkEl.style.width = inkEl.style.height = Math.max(targetEl.offsetWidth, targetEl.offsetHeight) + 'px';
targetEl.appendChild(inkEl);
}
inkEl.style.left = (e.offsetX - inkEl.offsetWidth / 2) + 'px';
inkEl.style.top = (e.offsetY - inkEl.offsetHeight / 2) + 'px';
inkEl.classList.add('animate');
}, false);
}
HTML
<a class="btn ripplelink cyan" href="#!">Hover & Click me!</a>
<a class="btn ripplelink lightgreen" href="#!">Hover & Click me!</a>
<a class="btn ripplelink amber" href="#!">Hover & Click me!</a>
<a class="btn ripplelink orange" href="#!">Hover & Click me!</a>
Working Result
Click the buttons to see the click effect.
Hover & Click me! Hover & Click me! Hover & Click me! Hover & Click me!External Link for Radial Click Effect