How to create a Codepen Like/Love button

So I have to admit that I’m using Codepen alot, I’m also liking their “love/like” button. So I set to recreate the effect.

This pen is still quite sought after and has received many “likes”

This is the end result

See the Pen Codepen heart by Michael Dobekidis (@netgfx) on CodePen.

Continue if you want to know how it was build.

Now lets get some basic HTML in there

<div id="bg"></div>
<div id="heartbutton">
  <svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.0"
   width="200"
   height="200"
   id="mainHeart" preserveAspectRatio="none" viewBox="-50 -50 200 200">
  <defs
     id="defs4" />
  <g id="layer1" transform="scale(0.15)" >
    <path
       d="M 297.29747,550.86823 C 283.52243,535.43191 249.1268,505.33855 220.86277,483.99412 C 137.11867,420.75228 125.72108,411.5999 91.719238,380.29088 C 29.03471,322.57071 2.413622,264.58086 2.5048478,185.95124 C 2.5493594,147.56739 5.1656152,132.77929 15.914734,110.15398 C 34.151433,71.768267 61.014996,43.244667 95.360052,25.799457 C 119.68545,13.443675 131.6827,7.9542046 172.30448,7.7296236 C 214.79777,7.4947896 223.74311,12.449347 248.73919,26.181459 C 279.1637,42.895777 310.47909,78.617167 316.95242,103.99205 L 320.95052,119.66445 L 330.81015,98.079942 C 386.52632,-23.892986 564.40851,-22.06811 626.31244,101.11153 C 645.95011,140.18758 648.10608,223.6247 630.69256,270.6244 C 607.97729,331.93377 565.31255,378.67493 466.68622,450.30098 C 402.0054,497.27462 328.80148,568.34684 323.70555,578.32901 C 317.79007,589.91654 323.42339,580.14491 297.29747,550.86823 z"
       id="path2417"
       style="fill:#ffffff" />
    <g
       transform="translate(129.28571,-64.285714)"
       id="g2221" />
  </g>
</svg>
</div>

What we are doing here is to create a container for the heart button and include an SVG element that is the shape of the heart.

What about CSS?

Sure we have css and it looks like this.

#bg {
  position:fixed;
  width:100%;
  height: 100%;
  background-color:#1e1e1e;
}

body {
  margin:0;
}

#heartbutton {
  width: 200px;
  height: 200px;
  background: #424242; /* Old browsers */
background: -moz-linear-gradient(top,  #424242 0%, #212123 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#424242), color-stop(100%,#212123)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #424242 0%,#212123 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #424242 0%,#212123 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #424242 0%,#212123 100%); /* IE10+ */
background: linear-gradient(to bottom,  #424242 0%,#212123 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424242', endColorstr='#212123',GradientType=0 ); /* IE6-9 */
  border: 1px solid #010101;
  position:relative;
  display:block;
  border-radius: 5px;
  top: 20px;
  left: 50%;
  margin-left: -100px;
}

#layer1 {
  cursor:pointer;
}

This gives us some very nice color for the heart and make the button look like, well a button.

Give us the juice!

Yes well some Javascript is here to complete our work.

var love = "#FFAEAE";
var extraLove = "#FF8484";
var superLove = "#FF4545"
var index = 0;
$(document).ready(function(){
   
  $("#layer1").on("click", function(){
   
    if(index === 0){
    var clone = $("#mainHeart").clone(false).attr("id","clone1").css({"position":"fixed", "top":20}).appendTo("#heartbutton");
   
    TweenMax.to($("#clone1"), 1.2, {
      x:-5,
      top:10,
      scaleX:2.2,
      scaleY:2.2,
      opacity:0,
      onStart:function(){
      $("#clone1").children("g#layer1").find("path").css("fill",love);
      $("#mainHeart").children("g#layer1").find("path").css("fill",love);
    }, onComplete:function(){
      $("#clone1").remove();
    }});
     
      index += 1;
    }
    else if(index === 1) {
      var clone = $("#mainHeart").clone(false).attr("id","clone2").css({"position":"fixed", "top":20}).appendTo("#heartbutton");
     
      $("#clone2").children("g#layer1").find("path").css("fill",extraLove);
      $("#mainHeart").children("g#layer1").find("path").css("fill",extraLove);
      var tl = new TimelineLite({
        "paused":true,
        smoothChildTiming:true,
        "align":"sequence",
        onComplete: function(){
        $("#clone2").remove();
      }});
     
      tl.add( TweenMax.to($("#clone2"), 0.5,{
        x: -20,
        top: -10,
        opacity:0.6,
        scaleX: 1.6,
        scaleY: 1.6,
        ease: Linear.easeNone
      }) );
     
      tl.add( TweenMax.to($("#clone2"), 0.6,{
        x: 35,
        top: 60,
        opacity:0,
        scaleX: 2.4,
        scaleY: 2.4,
        ease: Linear.easeNone
      }));
     
      tl.play();
     
      index += 1;
     
    }
    else if(index === 2) {
      var clone = $("#mainHeart").clone(false).attr("id","clone3").css({"position":"fixed", "top":20}).appendTo("#heartbutton");
     
      $("#clone3").children("g#layer1").find("path").css("fill",superLove);
      $("#mainHeart").children("g#layer1").find("path").css("fill",superLove);
      var tl = new TimelineLite({
        "paused":true,
        smoothChildTiming:true,
        "align":"sequence",
        onComplete: function(){
        $("#clone3").remove();
      }});
     
      tl.add( TweenMax.to($("#clone3"), 0.5,{
        x: -50,
        top: -20,
        opacity:0.6,
        scaleX: 2,
        scaleY: 2,
        ease: Linear.easeNone
      }) );
     
      tl.add( TweenMax.to($("#clone3"), 0.8,{
        x: 40,
        top: 60,
        opacity:0,
        scaleX: 3.4,
        scaleY: 3.4,
        ease: Linear.easeNone
      }));
     
      tl.play();
     
      index += 1;
    }
    else {
      $("#mainHeart").children("g#layer1").find("path").css("fill","#ffffff");
      index = 0;
    }
  });  
});

Here we declare three levels of love (love, extraLove, superLove) which correspond to different colors. Then we check how many times the user has clicked, and each time we do the following:

  • Clone the SVG element
  • Give it id attribute and style
  • Animate it using TimelineLite from GSAP

When user clicks more than 3 times the button heart is reset to its original style.

If you liked it, loved it or have questions don’t hesitate to comment below.

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *