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.

Demo

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

Hover & Click me! Hover & Click me! Hover & Click me! Hover & Click me!

External Link for Radial Click Effect

Other Items in css
Page Views

This page has been viewed 60 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹