Animated Like Button with HTML CSS & JS

2 min readApr 20, 2021

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 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 Output: