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

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 401 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.

âĪðŸ‘Đ‍ðŸ’ŧðŸ•đ

Random Quote
Treasure every moment that you have and treasure it more because you shared it with someone special, special enough to spend your time...and remember that time waits for no one.
Unknown