Like Button with animation

Utilities Bootstrap 5Free+ CSS+ JS

Like Button with animation — a free Bootstrap 5 utility snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.

2.7k views23 downloads5 years ago

gosnippets.com/preview/like-button-with-animation

Source Code

1<div id="wrapper">
2  <svg version="1.1" id="fb-like" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
3	 viewBox="0 0 194 178" style="enable-background:new 0 0 194 178;" xml:space="preserve">
4<style type="text/css">
5	.st0{fill:#FFFFFF;}
6	.st1{display:none;fill:#FFFFFF;}
7</style>
8  <g id="hand-wrapper">
9    <path id="hand" class="st0" d="M119.1,70.1c0,0,20.8-1.2,28.5,0c7.7,1.2,10.3,2,13.8,6.2s2.4,10.5,1.8,12.4c-0.7,1.9-2,3.7-0.2,6
10	s2.5,7.6,1.4,11.9c-1.1,4.2-3.3,6.6-3.3,6.6s0.1,11.1-3.4,16.6c-3.5,5.6-3.3,3.3-3.3,7.7s-3.5,9.2-10.4,11.8s-24,4.5-48.5,4.3
11	c0,0-12.7-0.3-17.9-8.3s-3.8-21.2-3.8-21.2s-0.7-22.5-0.4-25.8s0.4-12.7,10.4-28.2H119.1z"/>
12    <path id="thumb" class="st0" d="M82.7,72c0,0,11.4-17.3,11.7-20.7s-0.8-12.8-0.4-18.7s2.3-8.1,9.9-8.2s14.8,5,17.3,13.8
13	s-1.3,20.6-1.3,20.6s-2.1,5.6-2.4,6.8s-2.3,5,1.7,4.8l1.3,0.1"/>
14    <path id="thumb-morph" class="st1" d="M82.7,72c0,0,36.6-38,45.4-37c8.8,1,17.1,13,7.2,23s-15.6,12.7-19.2,19.2
15	C112.6,83.6,82.7,72,82.7,72z"/>
16  </g>
17<path id="arm" class="st0" d="M36.6,150.3c0,0-4.1-2.5-5.9-11.8s-2.1-39.7-1.3-47.2s2.8-12.4,11.4-12.8s12-0.3,14.5,0.6s7,2.1,8,7.1
18	c1,5-1,7.4,0.9,52.2c0,0,1.4,5.8-4.8,11.8S36.6,150.3,36.6,150.3z"/>
19</svg>
20  <div id="btnOff"></div>
21  <div id="btnOn"></div>
22</div>
23
24
25<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js'></script> 
26<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

More Utilities snippets

Auto move mouse cursor snippet

Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.

UtilitiesView →

Bootstrap 5 Ecommerce Product Detail Page Design snippet

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Bootstrap 5 Ecommerce single product page design template

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div id="wrapper"> 2 <svg version="1.1" id="fb-like" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 3 viewBox="0 0 194 178" style="enable-background:new 0 0 194 178;" xml:space="preserve"> 4<style type="text/css"> 5 .st0{fill:#FFFFFF;} 6 .st1{display:none;fill:#FFFFFF;} 7</style> 8 <g id="hand-wrapper"> 9 <path id="hand" class="st0" d="M119.1,70.1c0,0,20.8-1.2,28.5,0c7.7,1.2,10.3,2,13.8,6.2s2.4,10.5,1.8,12.4c-0.7,1.9-2,3.7-0.2,6 10 s2.5,7.6,1.4,11.9c-1.1,4.2-3.3,6.6-3.3,6.6s0.1,11.1-3.4,16.6c-3.5,5.6-3.3,3.3-3.3,7.7s-3.5,9.2-10.4,11.8s-24,4.5-48.5,4.3 11 c0,0-12.7-0.3-17.9-8.3s-3.8-21.2-3.8-21.2s-0.7-22.5-0.4-25.8s0.4-12.7,10.4-28.2H119.1z"/> 12 <path id="thumb" class="st0" d="M82.7,72c0,0,11.4-17.3,11.7-20.7s-0.8-12.8-0.4-18.7s2.3-8.1,9.9-8.2s14.8,5,17.3,13.8 13 s-1.3,20.6-1.3,20.6s-2.1,5.6-2.4,6.8s-2.3,5,1.7,4.8l1.3,0.1"/> 14 <path id="thumb-morph" class="st1" d="M82.7,72c0,0,36.6-38,45.4-37c8.8,1,17.1,13,7.2,23s-15.6,12.7-19.2,19.2 15 C112.6,83.6,82.7,72,82.7,72z"/> 16 </g> 17<path id="arm" class="st0" d="M36.6,150.3c0,0-4.1-2.5-5.9-11.8s-2.1-39.7-1.3-47.2s2.8-12.4,11.4-12.8s12-0.3,14.5,0.6s7,2.1,8,7.1 18 c1,5-1,7.4,0.9,52.2c0,0,1.4,5.8-4.8,11.8S36.6,150.3,36.6,150.3z"/> 19</svg> 20 <div id="btnOff"></div> 21 <div id="btnOn"></div> 22</div> 23 24 25<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js'></script> 26<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>