Simple button click animation

Simple button click animation
07.12.2017

In this tutorial you will learn simple hover animation with click function. For this tutorial I used jQuery and Font Awesome.

You need to add tag <p> with class btn color style as you want, and two tags <span>. First <span>is used for button name, and the second one <span> is used for font-awesome icon.

<p class="btn" style="  background-color:#1e88e5;">
<span>Button</span>
<span class="fa fa-close"></span>
</p>

The most important thing in style is to add to btn class widht, height, display block, and transition. After that add display block to both of <span> elements and add them transition too, and put them with style float next to each other. After we hover btn element we need to move away first <span>element and give full width to second <span> element.

.btn{
  width:200px;
  height:60px;
  display:block;
  overflow:hidden;
  border-radius:3px;
  margin:0 auto;
  cursor:pointer;
  transition: all 0.3s ease;
      box-shadow: 0 0.46875rem 2.1875rem rgba(90,97,105,.1), 0 0.9375rem 1.40625rem rgba(90,97,105,.1), 0 0.25rem 0.53125rem rgba(90,97,105,.12), 0 0.125rem 0.1875rem rgba(90,97,105,.1);
}
.btn span:nth-child(1){
  display:block;
  float:left;
  width:145px;
  height:60px;
  line-height:60px;
  text-align:center;
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  transition: all 0.3s ease;
}
.btn span:nth-child(2){
  display:block;
  float:left;
  width:55px;
  height:40px;
  line-height:40px;
  text-align:center;
  color:#fff;
  font-size:16px;
  border-left:1px solid rgba(255, 255, 255, 0.4);;
  box-sizing:border-box;
  margin-top:10px;
  transition: all 0.3s ease;
}

.btn:hover span:nth-child(1){
  margin-left:-150px;
}
.btn:hover span:nth-child(2){
    width:200px;
    height:50px;
    line-height:50px;
    text-align:center;
    color:#fff;
    font-size:25px;
    border-left:0px solid rgba(255, 255, 255, 0.4);;
    box-sizing:border-box;
    margin-top:5px;
}

.btn-selected{
    background-color:#1ee564!important;
}
.btn-selected span:nth-child(1){
  margin-left:-150px;
}
.btn-selected span:nth-child(2){
    width:200px;
    height:50px;
    line-height:50px;
    text-align:center;
    color:#fff;
    font-size:25px;
    border-left:0px solid rgba(255, 255, 255, 0.4);;
    box-sizing:border-box;
    margin-top:5px;
}

To add click event we need javascript and class btn-selected. Class btn-selected is used to add green color to element and to hold font awesome icon on the middle. In javascript code we need to add click event and to check does button that we click on it have class btn-selected. If button have that class we remove it and add class fa-close to second <span> element and button is returned to the default state, if button dont have that class we add it to button and add fa-check class to the second <span> element.

You can see finish result below.