DEV Community

Cover image for Creating Super Buttons for Like, Share and Subscribe
Mohit Maroliya
Mohit Maroliya

Posted on

Creating Super Buttons for Like, Share and Subscribe

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

Note: just define the fillheart() function with a console.log statement as of now in index.js or under script 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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}

Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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 ! ☘️

Discussion (0)