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.jsor underscripttag.
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
cdnlink 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)