[data-ripple] {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 1rem 3rem;
}

[data-droplet] {
  pointer-events: none;
  position: absolute;
  border-radius: 50%;
  background-color: #3d9fc1;
  opacity: 0.5;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: spread 0.66s linear;
          animation: spread 0.66s linear;
}

@-webkit-keyframes spread {
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}

@keyframes spread {
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}