Cacher is the code snippet organizer for pro developers

// https://codepen.io/FUGU22/pen/qjKLJY
.ripple
  position: absolute
  height: 30px
  width: 30px
  border: 1px solid rgba(white, .3)
  border-radius: 100%
  visibility: hidden
  
.ripple2
  position: absolute
  height: 30px
  width: 30px
  border: 1px solid rgba(white, .3)
  border-radius: 100%
  visibility: hidden
  
.submit:hover > .ripple
  animation: ripple 1.6s ease-out infinite
  @keyframes ripple
    0%
      visibility: visible
    40%
      visibility: visible
      transform: scale(2.9)
      border: 1px solid rgba(white, 0)
    100%
      visibility: visible
      transform: scale(2.9)
      border: 1px solid rgba(white, 0)
  
.submit:hover > .ripple2
  animation: ripple2 1.6s ease-out infinite
  animation-delay: .4s
  @keyframes ripple2
    0%
      visibility: visible
    40%
      visibility: visible
      transform: scale(2.9)
      border: 1px solid rgba(white, 0)
    100%
      visibility: visible
      transform: scale(2.9)
      border: 1px solid rgba(white, 0)