Whenever you watches any YouTube video, I'm sure you have come across the terms Like
, Share
and Subscribe
.
I wanted to create a cool html-css
button that represents the feeling of Like-Share-Subscribe.
For this we require a html file index.html
, css file style.css
and javaScript file index.js
.
The end result for Like
button is like this:
Setting up the input structure
Lets get started by setting up the basic structure. We had used <input/>
of type checkbox
here which is also known as toggle
.
So for our index.html
file, all we need is the following code:
<body>
<label id="Likebtn" for="myBtn" class="star-button" onclick="fillheart()">
<input type="checkbox" id="myBtn" />
<div class="heart">
<i id="un-filled-heart" class="far fa-heart"></i>
</div>
<div class="btn-text">
<span>Like</span>
<span>Liked</span>
</div>
<div class="active-heart">
<i class="fas fa-heart"></i>
</div>
</label>
<br />
<script src="src/index.js" type="text/javascript"></script>
</body>
Note: just define the fillheart() function with a console.log statement as of now in
index.js
or underscript
tag.
Since, we have defined the ids
and classes
for the html components, so now its time to add some styling and animations to them. 😄
Adding the Styles
We first add styling to input checkbox, label (star-button) and the icon.
Note: I have used the
cdn
link of FontAwesome to use the icons. Check here for the cdn link.
body {
height: 50vh;
display: grid;
place-items: center;
overflow: hidden;
background: rgb(218, 216, 216);
}
input {
display: none;
}
.star-button {
position: relative;
width: 250px;
height: 85px;
margin-top: 70px;
border-radius: 15px;
cursor: pointer;
background: rgb(255, 255, 255);
z-index: 2;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.096);
}
.heart {
position: absolute;
left: 15%;
top: 55%;
font-size: 45px;
transform: translateY(-50%);
color: rgb(196, 196, 196);
z-index: 1;
}
Now we add some styling to the text over the button and on the span component of it.
.btn-text {
position: absolute;
left: 50%;
width: 130px;
height: 100%;
background: rgb(228, 51, 66);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 15px;
overflow-x: hidden;
}
.btn-text span{
color: rgb(255, 255, 255);
transform: translateX(55%);
font-size: 35px;
padding: 20px;
font-family: "sans-serif";
transition: 0.2s;
user-select: none;
}
.active-heart {
position: absolute;
right: 15%;
top: 20%;
font-size: 50px;
z-index: -1;
color: rgb(219, 219, 219);
}
Now we add the styling to all the corresponding components when the input checkbox is checked.
input:checked + .heart {
animation: move 0.7s ease-in forwards;
color: rgb(228, 51, 66);
}
input:checked ~ .active-heart {
color: rgb(228, 51, 66);
transition-delay: 0.7s;
animation: shake 0.8s 0.2s forwards;
animation-delay: 0.7s;
}
input:checked ~ .btn-text span {
transform: translateX(-45%);
transition-delay: 0.7s;
}
input:checked ~ .btn-text {
left: 0;
}
In the above code, you observed that we have used two types of animation named move
and shake
for the icon heart. So now we define the above-mentioned animation using keyframes.
move animation
@keyframes move {
10% {
transform: translateX(-330%) scale(1.2);
left: 20%;
opacity: 1;
}
30% {
transform: translateY(150%);
}
50% {
transform: translateX(300%);
opacity: 1;
}
75% {
transform: translateY(200%);
left: 65%;
opacity: 1;
}
85% {
left: 70%;
}
100% {
transform: translateY(-600%);
left: 70%;
opacity: 0;
}
}
shake animation
@keyframes shake {
0% {
transform: scale3d(1, 1, 1);
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
30% {
transform: scale3d(1.25, 0.75, 1);
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
40% {
transform: scale3d(0.75, 1.25, 1);
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
50% {
transform: scale3d(1.15, 0.85, 1);
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
65% {
transform: scale3d(0.95, 1.05, 1);
text-shadow: 0 0 2px #ff0000, 0 0 5px #0000ffb7;
}
75% {
transform: scale3d(1.05, 0.95, 1);
text-shadow: 0 0 1px #ff0000, 0 0 5px #0000ff83;
}
100% {
transform: scale3d(1, 1, 1);
text-shadow: 0 0 1px rgb(153, 151, 151), 0 0 5px rgb(174, 174, 179);
}
}
Now we only left to add javascript.
Adding JavaScript Logic
Either create a seperate index.js
file or write within <script>
in index.html .
Add the following code.
let myBtn = document.getElementById("myBtn");
function fillheart() {
if (myBtn.checked === 1) {
document
.getElementById("un-filled-heart")
.setAttribute("class", "fas fa-heart");
} else {
document
.getElementById("un-filled-heart")
.setAttribute("class", "far fa-heart");
}
}
Conclusion
Cheers! 🍻, you have build the SuperLike
button.
Now you can come up with as many stylings to this small application. You can take up some challenges by making SuperShare
and SuperSubcribe
button as given below.
SuperShare
SuperSubscribe
Thank you for your time. Since this is my second post, please share your valuable feedback in comments also.
Happy Coding ! ☘️
Top comments (0)