<div class="wrapper">
<div class="button-container">
<div class="button">
<span class="content">
<i class="icon fa fa-heart" aria-hidden="true"></i>
<i class="icon far fa-heart" aria-hidden="true"></i>
<span class="text like">Like<span class="text d">d</span></span>
<span class="text number">29</span>
</span>
</div>
</div>
</div>
/* VARIABLES - START */
/* COLORS */
$theme-bg: #7eccc7;
$button-bg: #fefefe;
$theme-pink: #ea4a87;
$theme-grey: #7a7c81;
$theme-black: #2f3537;
/* DIMENSIONS */
$bg-height: 225px;
$bg-width: 325px;
$bg-radius: 10px;
$button-radius: 5px;
$button-height: 50px;
$button-width: 170px;
/* FONTS */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap");
$theme-font: "Lato", sans-serif;
/* VARIABLES - END */
/* COMMONS - START */
.flex-center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
* {
box-sizing: border-box;
margin: 0;
}
/* COMMONS - END */
/* STYLES - START */
.wrapper {
@extend .flex-center;
background-color: #ededed;
font-family: $theme-font;
font-weight: 400;
.button-container {
@extend .flex-center;
height: $bg-height;
width: $bg-width;
background-color: $theme-bg;
border-radius: $bg-radius;
}
}
.button {
height: $button-height;
width: $button-width;
background-color: $button-bg;
border-radius: $button-radius;
padding: 12.5px;
cursor: pointer;
}
.content {
.icon {
font-size: 25px;
color: $theme-pink;
&.fa {
display: none;
}
}
.text {
font-size: 25px;
color: $theme-black;
&.like {
margin-left: 10px;
}
&.d {
opacity: 0;
display: inline-block;
transform: translateX(12px);
}
&.number {
margin-left: 10px;
color: $theme-grey;
}
}
}
/* STYLES - END */
View Compiled
var like = parseInt($(".number").text()) + 1;
var flag = true;
var timeline1 = gsap.timeline({ repeatDelay: 0.7, paused: true});
timeline1.to(".button", {duration: 0.7, width: 50, ease: Back.easeIn})
.to(".like", {duration: 0.2, opacity: 0}, "-=0.7")
.to(".number", {duration: 0.2,opacity: 0, fontSize: 0}, "-=0.7")
.to(".far", {duration: 0.4, display: "none"}, "-=0.5")
.to(".fa", {duration: 0.1, display: "inline-block"},"-=0.1")
.to(".button", {duration: 0.7, width: 170})
.to(".like", { opacity: 1},"-=0.5")
.to(".d", {duration: 0.3, opacity: 1, translateX: 0},"-=0.2").to(".number", {duration: 0.2, opacity: 1, text: like, fontSize: 25}, "-=0.1");
$(".button").click(function(){
event.stopPropagation();
flag ? timeline1.play() : timeline1.progress(0).pause();
flag = !flag;
});
/*
Original design by Kashish Mehta
Dribbble - https://dribbble.com/kashish4xd
Design - https://dribbble.com/shots/11353059-Like-Button
*/