How to Create Twitter Heart Button Animation

Submitted by alpha_luna on Thursday, June 23, 2016 - 16:22.

In this article, we are going to create Twitter Heart Button Animation with CSS3. Twitter has released a new heart button, it's a replacement for the favorite button. This heart button it's a cool animation effect for click action. This article will help you how to create this using CSS3 and jQuery. Result

Creating Markup

Displaying example of a news feed. Copy and paste this HTML source code to your BODY tag of your page.

<div id="container">
<h1>Twitter Heart Button Animation with CSS3</h1>
 
<h3>Click on heart button</h3>
 
<div class="newsFeed" id="newsFeed1">
<p>Free Source Code - PHP <a href="http://www.sourcecodester.com/php" target="_blank">http://www.sourcecodester.com/php</a></p>
<div class="heart_animation_Class " id="like1" rel="like"></div> <div class="count_For_Like" id="count_For_Like1">195</div>
</div>
 
<div class="newsFeed" id="newsFeed2">
<p>Free Source Code - C/C++ <a href="http://www.sourcecodester.com/cpp" target="_blank">http://www.sourcecodester.com/cpp</a></p>
<div class="heart_animation_Class" id="like2" rel="like"></div> <div class="count_For_Like" id="count_For_Like2">149</div>
</div>
 
<div class="newsFeed" id="newsFeed2">
<p>Free Source Code - Visual Basic .NET <a href="http://www.sourcecodester.com/visual-basic-net" target="_blank">http://www.sourcecodester.com/visual-basic-net</a></p>
<div class="heart_animation_Class" id="like3" rel="like"></div> <div class="count_For_Like" id="count_For_Like3">159</div>
</div>
</div>

JavaScript Codes

It contains the class name of the DIV tag. Copy and paste this script and link to your HEAD tag of your page.

<script src="js_code.js"></script>
<script>
$(document).ready(function()
{
   
$('body').on("click",'.heart_animation_Class',function()
   {
        var A=$(this).attr("id");
        var B=A.split("like");
       var messageID=B[1];
       var C=parseInt($("#count_For_Like"+messageID).html());
        $(this).css("background-position","")
       var D=$(this).attr("rel");
      
       if(D === 'like') 
       {      
       $("#count_For_Like"+messageID).html(C+1);
       $(this).addClass("heartAnimation").attr("rel","unlike");
       
       }
       else
       {
       $("#count_For_Like"+messageID).html(C-1);
       $(this).removeClass("heartAnimation").attr("rel","like");
       $(this).css("background-position","left");
       }
   });
});
</script>

Was this article helpful?

Kindly click the "Download Code" button below for full source code. Thank you very much. Hope that this tutorial will help you a lot. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.