CodePen Embed - Animated Like Button

<div class="wrapper">
  <div class="heart-top x1">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="202" height="188.77" viewBox="0 0 202 188.77"><path class="cls-1" d="M593,489c0,55.78-101,126-101,126S391,544.78,391,489c0-37.59,15.92-62.77,51-62.77S492,449,492,449s15-22.2,51-22.2C577.67,426.8,593,451.82,593,489Z" transform="translate(-391 -426.23)"/></svg>
  </div>
  <div class="heart-top x2">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="202" height="188.77" viewBox="0 0 202 188.77"><path class="cls-1" d="M442,437.23c27.64,0,39.88,16.51,40.83,17.85l8.93,14.63,9.33-14.51c.93-1.28,13.25-17.4,41.91-17.4,13.22,0,22.77,4.17,29.2,12.75S582,472.41,582,489c0,19.72-16.24,45.94-47,75.83a450,450,0,0,1-43,36.56,450,450,0,0,1-43-36.56c-30.72-29.89-47-56.11-47-75.83,0-16.71,3.49-30.14,10.1-38.82s16.41-12.95,29.9-12.95m0-11c-35.08,0-51,25.18-51,62.77,0,55.78,101,126,101,126s101-70.22,101-126c0-37.18-15.33-62.2-50-62.2-36,0-51,22.2-51,22.2s-15-22.77-50-22.77Z" transform="translate(-391 -426.23)"/></svg>
  </div>
  <div class="heart-top x2">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="202" height="188.77" viewBox="0 0 202 188.77"><path class="cls-1" d="M593,489c0,55.78-101,126-101,126S391,544.78,391,489c0-37.59,15.92-62.77,51-62.77S492,449,492,449s15-22.2,51-22.2C577.67,426.8,593,451.82,593,489Z" transform="translate(-391 -426.23)"/></svg>
  </div>
  <div class="heart-top x3">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="202" height="188.77" viewBox="0 0 202 188.77"><path class="cls-1" d="M593,489c0,55.78-101,126-101,126S391,544.78,391,489c0-37.59,15.92-62.77,51-62.77S492,449,492,449s15-22.2,51-22.2C577.67,426.8,593,451.82,593,489Z" transform="translate(-391 -426.23)"/></svg>
  </div>
  <div class="heart-top x4">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="202" height="188.77" viewBox="0 0 202 188.77"><path class="cls-1" d="M442,437.23c27.64,0,39.88,16.51,40.83,17.85l8.93,14.63,9.33-14.51c.93-1.28,13.25-17.4,41.91-17.4,13.22,0,22.77,4.17,29.2,12.75S582,472.41,582,489c0,19.72-16.24,45.94-47,75.83a450,450,0,0,1-43,36.56,450,450,0,0,1-43-36.56c-30.72-29.89-47-56.11-47-75.83,0-16.71,3.49-30.14,10.1-38.82s16.41-12.95,29.9-12.95m0-11c-35.08,0-51,25.18-51,62.77,0,55.78,101,126,101,126s101-70.22,101-126c0-37.18-15.33-62.2-50-62.2-36,0-51,22.2-51,22.2s-15-22.77-50-22.77Z" transform="translate(-391 -426.23)"/></svg>
  </div>
  <div class="heart-top x5">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="202" height="188.77" viewBox="0 0 202 188.77"><path class="cls-1" d="M593,489c0,55.78-101,126-101,126S391,544.78,391,489c0-37.59,15.92-62.77,51-62.77S492,449,492,449s15-22.2,51-22.2C577.67,426.8,593,451.82,593,489Z" transform="translate(-391 -426.23)"/></svg>
  </div>
  <div class="heart-top x6">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="202" height="188.77" viewBox="0 0 202 188.77"><path class="cls-1" d="M442,437.23c27.64,0,39.88,16.51,40.83,17.85l8.93,14.63,9.33-14.51c.93-1.28,13.25-17.4,41.91-17.4,13.22,0,22.77,4.17,29.2,12.75S582,472.41,582,489c0,19.72-16.24,45.94-47,75.83a450,450,0,0,1-43,36.56,450,450,0,0,1-43-36.56c-30.72-29.89-47-56.11-47-75.83,0-16.71,3.49-30.14,10.1-38.82s16.41-12.95,29.9-12.95m0-11c-35.08,0-51,25.18-51,62.77,0,55.78,101,126,101,126s101-70.22,101-126c0-37.18-15.33-62.2-50-62.2-36,0-51,22.2-51,22.2s-15-22.77-50-22.77Z" transform="translate(-391 -426.23)"/></svg>
  </div>
  <div class="heart-top x7">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="202" height="188.77" viewBox="0 0 202 188.77"><path class="cls-1" d="M442,437.23c27.64,0,39.88,16.51,40.83,17.85l8.93,14.63,9.33-14.51c.93-1.28,13.25-17.4,41.91-17.4,13.22,0,22.77,4.17,29.2,12.75S582,472.41,582,489c0,19.72-16.24,45.94-47,75.83a450,450,0,0,1-43,36.56,450,450,0,0,1-43-36.56c-30.72-29.89-47-56.11-47-75.83,0-16.71,3.49-30.14,10.1-38.82s16.41-12.95,29.9-12.95m0-11c-35.08,0-51,25.18-51,62.77,0,55.78,101,126,101,126s101-70.22,101-126c0-37.18-15.33-62.2-50-62.2-36,0-51,22.2-51,22.2s-15-22.77-50-22.77Z" transform="translate(-391 -426.23)"/></svg>
  </div>
  <div class="heart-top x8">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="202" height="188.77" viewBox="0 0 202 188.77"><path class="cls-1" d="M593,489c0,55.78-101,126-101,126S391,544.78,391,489c0-37.59,15.92-62.77,51-62.77S492,449,492,449s15-22.2,51-22.2C577.67,426.8,593,451.82,593,489Z" transform="translate(-391 -426.23)"/></svg>
  </div>
  <div class="heart-top x9">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="202" height="188.77" viewBox="0 0 202 188.77"><path class="cls-1" d="M593,489c0,55.78-101,126-101,126S391,544.78,391,489c0-37.59,15.92-62.77,51-62.77S492,449,492,449s15-22.2,51-22.2C577.67,426.8,593,451.82,593,489Z" transform="translate(-391 -426.23)"/></svg>
  </div>
  
  <div class="like-button">&#x2764; Like Me!</div>
  <div class="heart-bottom x1"></div>
  <div class="heart-bottom x2"></div>
  <div class="heart-bottom x3"></div>
  <div class="heart-bottom x4"></div>
  <div class="heart-bottom x5"></div>
  <div class="heart-bottom x6"></div>
  <div class="heart-bottom x7"></div>
  <div class="heart-bottom x8"></div>
  <div class="heart-bottom x9"></div>
</div>

$mbdpink: #ec185c;
$button-bg: $mbdpink;
$button-text-color: #fff;

body {
  font-size: 16px;
  font-family: "Helvetica", "Arial", sans-serif;
  text-align: center;
}

.wrapper {
  display: block;
  overflow: hidden;
  width: 160px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  cursor: pointer;
  z-index: 0;
}

.heart-top {
  height: 25px;
  width: 25px;
  position: absolute;
  z-index: -111111111;
  top: 120px;
  opacity: 0;

  &.x1 {
    left: 0px;
  }
  &.x2 {
    left: 5px;
  }
  &.x3 {
    left: 10px;
  }
  &.x4 {
    left: 20px;
  }
  &.x5 {
    left: 30px;
  }
  &.x6 {
    left: 50px;
  }
  &.x7 {
    left: 90px;
  }
  &.x8 {
    left: 110px;
  }
  &.x9 {
    left: 130px;
  }

  svg {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
}

.cls-1 {
  fill: #ec185c;
}

.like-button {
  font-family: "Helvetica", "Arial", sans-serif;
  display: inline-block;
  font-size: 1em;
  padding: 1em 2em;
  margin-top: 100px;
  margin-bottom: 60px;
  -webkit-appearance: none;
  appearance: none;
  background-color: $button-bg;
  color: $button-text-color;
  border-radius: 4px;
  border: none;
  position: relative;
  z-index: -11111;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
}

.animate .like-button:before,
.animate .like-button:after {
  position: absolute;
  content: "";
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
}

.animate:active > .like-button {
  transform: scale(0.9);
  background-color: darken($button-bg, 5%);
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}

.animate .like-button {
  &:before {
    display: block;
    animation: topBubbles ease-in-out 0.75s forwards;
  }
  &:after {
    display: block;
    animation: bottomBubbles ease-in-out 0.75s forwards;
  }
}

.animate .x1 {
  display: block;
  animation: topBubblesx1 ease-in-out 1.2s forwards;
}
.animate .x2 {
  display: block;
  animation: topBubblesx2 ease-in-out 0.75s forwards;
}
.animate .x3 {
  display: block;
  animation: topBubblesx3 ease-in-out 1.5s forwards;
}
.animate .x4 {
  display: block;
  animation: topBubblesx4 ease-in-out 1s forwards;
}
.animate .x5 {
  display: block;
  animation: topBubblesx5 ease-in-out 2s forwards;
}
.animate .x6 {
  display: block;
  animation: topBubblesx6 ease-in-out 0.3s forwards;
}
.animate .x7 {
  display: block;
  animation: topBubblesx7 ease-in-out 0.75s forwards;
}
.animate .x8 {
  display: block;
  animation: topBubblesx8 ease-in-out 1.2s forwards;
}
.animate .x9 {
  display: block;
  animation: topBubblesx9 ease-in-out 0.75s forwards;
}

@keyframes topBubblesx1 {
  0% {
    top: 120px;
    left: 15px;
    opacity: 1;
  }
  50% {
    top: 60px;
    left: 0px;
  }
  100% {
    top: 0px;
    left: -15px;
    width: 0%;
    height: 0%;
  }
}

@keyframes topBubblesx2 {
  0% {
    top: 120px;
    left: 15px;
    opacity: 1;
  }
  50% {
    top: 40px;
    left: 40px;
  }
  100% {
    top: 20px;
    left: 20px;
    width: 0%;
    height: 0%;
  }
}

@keyframes topBubblesx3 {
  0% {
    top: 120px;
    left: 10px;
    opacity: 1;
  }
  50% {
    top: 60px;
    left: 15px;
  }
  100% {
    top: 0px;
    left: 10px;
    width: 0%;
    height: 0%;
  }
}

@keyframes topBubblesx4 {
  0% {
    top: 120px;
    left: 25px;
    opacity: 1;
  }
  50% {
    top: 25px;
    left: 25px;
  }
  100% {
    top: 10px;
    left: 20px;
    width: 0%;
    height: 0%;
  }
}

@keyframes topBubblesx5 {
  0% {
    top: 120px;
    left: 30px;
    opacity: 1;
  }
  50% {
    top: 7px;
    left: 40px;
  }
  100% {
    top: 40px;
    left: 30px;
    width: 0%;
    height: 0%;
  }
}

@keyframes topBubblesx6 {
  0% {
    top: 120px;
    left: 50px;
    opacity: 1;
  }
  50% {
    top: 40px;
    left: 80px;
  }
  100% {
    top: 20px;
    left: 50px;
    width: 0%;
    height: 0%;
  }
}

@keyframes topBubblesx7 {
  0% {
    top: 120px;
    left: 90px;
    opacity: 1;
  }
  50% {
    top: 60px;
    left: 80px;
  }
  100% {
    top: 0px;
    left: 90px;
    width: 0%;
    height: 0%;
  }
}

@keyframes topBubblesx8 {
  0% {
    top: 120px;
    left: 110px;
    opacity: 1;
  }
  50% {
    top: 20px;
    left: 90px;
  }
  100% {
    top: 10px;
    left: 120px;
    width: 0%;
    height: 0%;
  }
}

@keyframes topBubblesx9 {
  0% {
    top: 120px;
    left: 120px;
    opacity: 1;
  }
  50% {
    top: 40px;
    left: 140px;
  }
  100% {
    top: 20px;
    left: 140px;
    width: 0%;
    height: 0%;
  }
}

View Compiled

var animateButton = function(e) {

  e.preventDefault;
  //reset animation
  e.target.classList.remove('animate');
  
  e.target.classList.add('animate');
  setTimeout(function(){
    e.target.classList.remove('animate');
  },700);
};

var likeAnimButtons = document.getElementsByClassName("wrapper");

for (var i = 0; i < likeAnimButtons.length; i++) {
  likeAnimButtons[i].addEventListener('click', animateButton, false);
}

This Pen is owned by My Brother Darryl on CodePen.

See more by @mybrotherdarryl on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.