CSS Ripple

by amindunited

HTML

<button>
  Button One
</button>

CSS

button {
  position: relative;
  background-color: rgba(66, 127, 217, 1);
  color: white;
  border: solid 1px rgba(66, 127, 217, 1);
  border-radius: 3px;
  padding: 8px;
  min-height: 36px;
  min-width: 180px;
  font-size: 24px;
  overflow: hidden;
}

/* Ripple effect */
button {
  background-position: center;
  transition: background 0.8s;
}
button:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}
button:active {
  background-position: center;
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s;
}

JavaScript

/* const btn = document.querySelector('button');
btn.addEventListener('click', (e) => {
  const endTransition = (e) => {
    e.target.style.backgroundPosition = 'center';
  }
  e.target.addEventListener('transitionend', endTransition);
  console.log('where was the click', e);
}); */