Creating Super Buttons for Like, Share and Subscribe
Tags: beginners, html, css, javascript
Published: 2021-12-07 12:46:59


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:

{% codesandbox fill-heart-ldp1v %}

## 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.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. :smile:

## 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](https://fontawesome.com/v5.15/how-to-use/customizing-wordpress/snippets/setup-cdn-webfont) 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](https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp).

### 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! :beers:, you have build the `SuperLike` button. 

{% codesandbox fill-heart-ldp1v %}


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

{% codesandbox delicate-feather-bvu7b %}

### SuperSubscribe

{% codesandbox subscribe-button-roukv %}

Thank you for your time. Since this is my second post, please share your valuable feedback in comments also.

Happy Coding ! :shamrock: