Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn Animated Like Button with HTML CSS & JS.
Common Query
- How to create a Like Button
- How To Create Facebook Like Button
- How To Create Animated Like Button
See Also:- How to blink web browser tab
Animated Like Button Step By Step
First, we need to create two files index.html and style.css then we need to do code for it.
Step:#1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Facebook Like Button</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button id="like" onclick="liked()">
<i class="fa fa-thumbs-up"></i>
<span class="icon">Like</span>
</button>
<script>
function liked(){
var element = document.getElementById("like");
element.classList.toggle("liked");
}
</script>
</body>
</html>
Step:#2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #f2f4f6;
}
button {
background: #fff;
border: unset;
outline: 0;
font-size: 18px;
cursor: pointer;
color: #65676b;
padding: 5px 10px;
}
button.liked {
color: #0571ed;
}
button.liked i{
animation: anim 0.5s ease-in-out;
-webkit-animation: anim 0.5s ease-in-out;
}
@keyframes anim {
100% {
transform: rotate(-15deg) scale(1.3);
-webkit-transform: rotate(-15deg) scale(1.3);
-moz-transform: rotate(-15deg) scale(1.3);
-ms-transform: rotate(-15deg) scale(1.3);
-o-transform: rotate(-15deg) scale(1.3);
filter: blur(0.5px);
-webkit-filter: blur(0.5px);
}
}
Animated Like Button Video Output:
Animated Like Button Codepen Output:
Top comments (0)