Background ripple

Create a ripple effect when clicked.

by Leolloyd Andrade

HTML

<div class="ripple">
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.ripple {
  background: #4184f3;
  position: absolute;
  width: 100%;
  height: 100%;

  background-position: center;
  transition: background 0.8s;
}

.ripple:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}

.ripple:active {
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s;
}