interactive effect

index.html

<button onclick="clck()">click me!</button>

interactive-effect.markdown

interactive effect

A Pen by Sebastian Rothbucher on CodePen.

License.

script.js

var clckTo=null;
function clck() {
  var tgt=event.target;
  clearTimeout(clckTo); // (if any)
  tgt.classList.remove('clicked'); 
  clckTo=setTimeout(function() { // sure it's gone
    tgt.classList.add('clicked');
    clckTo=setTimeout(function() {
      tgt.classList.remove('clicked');
    }, 900);
  });
}

style.scss

$bg: #124559; // thx, coolors.co
button {
  border: none;
  border-radius: 0;
  font-size: 16px;
  padding: 11px 30px 12px 29px;
  background-color: $bg;
  color: white;
  box-shadow: 2px 2px 4px -1px grey;
  position: relative;
  overflow: hidden;
  &:after {
    content: ' ';
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    border-radius: 500px;
    background-color: white;
    opacity: 0.5;
  }
  &.clicked {
    &:after {
      left: calc(50% - 200px);
      top: calc(50% - 200px);
      width: 400px;
      height: 400px;
      opacity: 0;
    transition: left, top, width, height, opactity 0.7s, 0.7s, 0.7s, 0.7s, 0.7s; // only 'out'
    }
  }
  &:hover, &:focus {
    background-color: lighten($bg, 5%);
    padding: 12px 29px 11px 30px;
    box-shadow: none;
  }
  &:focus {
    outline: none;
  }
  &:active {
    background-color: lighten($bg, 15%);
  }
}