<a href="#" class="btn btn-bubble">Bubble Button</a>

//@import 'compass'; // for random() function
// this is evidently broken

$bubbles: ();
$move: ();

@for $i from 0 through 10 {
  $size: random(50, 120) / 100 * 1em;
  
  $start-x: random(-10, 110) * 1%;
  $start-y: random(80, 150) * 1%;
  
  $end-x: $start-x + random(-10, 10);
  $end-y: random(-400, 60) * 1%;
  
  $bubbles: append($bubbles, 
    radial-gradient(circle at center, transparent 30%, #eef 60%, #eef 65%, transparent 70%) $start-x $start-y / #{$size} #{$size}
    , comma);
  
  $move: append($move, $end-x $end-y, comma);
}

.btn-bubble {
  color: white;
  
  background-color: #77b11c;
  background-repeat: no-repeat;
  
  &:hover,
  &:focus {
    animation: bubbles 1s forwards ease-out;
    background: $bubbles;
    background-color: #77b11c;
    background-repeat: no-repeat;
  }
}

@keyframes bubbles {
  100% {
    background-position: $move;
    box-shadow: inset 0 -6.5em 0 #0072c4;
  }
}

//=== Pen styling, ignore
body {
  background: #10192d;
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.btn {
  display: inline-block;
  text-decoration: none;
  padding: 1em 2em;
}