Let's make a Like button

Prologue

Hello everyone, today we are going to make a nice looking like button that throws a little animation when clicked. We are going to use almost only CSS, with just a single line of javascript to perform the class toggle. There are more complicated examples that use sprites, like the twitter animation, but we are going to stick to something simple.

Get the example code

You can find the code for this series in the pen below.

Setting up

Before starting, we need to import some essential assets that we will use in our like button component: Material Icons, and of course jQuery. We won't need anything else. The Lato font import is only for demo purpose.

• Start by importing Material Icons :

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

• And then jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

We won't talk much about the layout, wich is very simple and container based. You can check the code example to see what's in there. We will start directly with the button markup.

Button markup

To make our button, we will wrap our structure inside an html link element.

<a href="javascript:void(0);" class="like-button">
  <i class="material-icons not-liked bouncy">favorite_border</i>
  <i class="material-icons is-liked bouncy">favorite</i>
  <span class="like-overlay"></span>
</a>

That is all we need for our button to work. Eventhough we use a link element, we don't want it to behave as a link element. That's why we use the expression javascript:void(0); to disable the link default behaviour when you click on it.

You can notice that there are also 2 icon elements. Each one is used to display the active and inactive state of the like button. We use the heart shaped material icon because it is available in both filled and outlined versions. We'll use the outlined heart to display the button inactive state and the filled one for the active state.

Finaly, there's the span with the .like-overlay class. It gives the overall animation a little magic touch. It fills the button background with color when active.

Add the styles

In our like button, everything is handled with styles and we just use a single line of javascript to make everything work together. First of all, we will need to define some color variables for our button :

$grey: #ccc;
$muted-grey: #999;
$heart: #ff4f8f;
$white: #fff;

Now that we have our base colors, we can style our main button element :

.like-button {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: $grey;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  text-decoration: none;
  overflow: hidden;
}

Note the relative button position. We will need it because the child overlay span will have an absolute position. We also use flexbox to position our inner icon.

Then, let's add the overlay styles :

.like-button {
  .like-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: $heart;
    transform: scale(0);
    transition: all 0.4s;
    z-index: 0;
  }
}

Html span elements have a default display: inline; css property. We need to change that to display: block; to have a better control over our overlay size and position. We give it a pink-ish background color for the button active state.

What is important here is the transform and transition properties. We set the default scale to (0) to completely hide the overlay when the button is inactive. The .4s value states that the overlay expand animation will have a duration of 400 miliseconds.

Now let's add the icons styles :

.like-button {
  i {
    &.not-liked {
      display: block;
      color: $white;
      position: relative;
      z-index: 1;
    }
    &.is-liked {
      display: none;
      color: $white;
      position: relative;
      z-index: 1;
    }
  }
}

We use 2 different classes for our icons, for the inactive and active state. By default we hide the .is-liked icon and display the .not-liked icon. We will then toggle their visibility with both CSS and javascript.

The last thing we have to do, if you look closely at the icon Html markup, is to deal with the .bouncy class. Rather than binding it to a set of styles, we will use CSS keyframes for the animation :

//Defining the animation
@-webkit-keyframes bouncy {
  from,
  to {
    -webkit-transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.9);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
  }
}
@keyframes bouncy {
  from,
  to {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}

//Animation Settings
.bouncy {
  -webkit-animation: bouncy 0.6s;
  animation: bouncy 0.6s;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

The .bouncy class ensures that the animation gets triggered everytime one of the icons is displayed. If you wan to learn more about CSS keyframes, you can read this great article at css-tricks.com.

##Active state styles To this point, we completely styled our button and it should already look nice, but kind of disabled, and of course, nothing happens when you click on it. We are now going to add the styles that will be applied with the active state:

.like-button {
  &.is-active {
    .like-overlay {
      transform: scale(1);
    }
    i {
      &.not-liked {
        display: none;
      }
      &.is-liked {
        display: block;
      }
    }
  }
}

Nothing fancy, but evrything to give that little "css magic" is here. We define a .is-active class that modifies the overlay and the icons state. We transform the overlay back to its original size and we toggle the icons visibility. Now we just need a single javascript line to perform the class toggle when the button is clicked.

Javascript handler

Let's add this little snippet to finish our button :

$(document).ready(() => {
  $('.like-button').click(function () {
    $(this).toggleClass('is-active')
  })
})

Great, our button is now finished and should display a nice animation when clicked.

Epilogue

In this post, we saw how to create a simple css animated button using some transitions, keyframes and some very light jQuery. If you want to share your thoughts or ask a question, give it a shot in the comments section. I hope you enjoyed this little session as much as i did writing it and to see you again soon on Css Ninja.