@mixin ripple($color-from: rgba(#fff, .2), $color-to: rgba(#fff, .7)) {
  & {
    background-position: center;
    transition: background 0.8s;
  }
  &:hover {
    background: $color-from radial-gradient(circle, transparent 1%, $color-from 1%) center/15000%;
  }
  &:active {
    background-color: $color-to;
    background-size: 100%;
    transition: background 0s;
  }
}

@keyframes ripple {
  0% {
    background-size: 0%;
  }
  100% {
    background-size: 100%;
  }
}