DEV Community

loading...
Cover image for Animated Like Button with HTML CSS & JS

Animated Like Button with HTML CSS & JS

stackfindover profile image Stackfindover Updated on ・2 min read

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

  1. How to create a Like Button
  2. How To Create Facebook Like Button
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

Animated Like Button Video Output:

Animated Like Button Codepen Output:

Discussion (0)

pic
Editor guide