U ovom tutorialu možete naučiti jednostavne hover animacije sa funkcijom klika. Za ovaj tutorial korišten je samo jQuery i Font Awesome

Prvo što trebate napraviti jest dodati tag <p> sa klasnom btn, a boju koju koju će te dodjeliti btn -u možete koristiti po želji. Zatim dodate dva <span> taga, prvi se koristi za prikaz teksta, a drugi za prikaz font-awesome ikone.

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

Najvažnija stvar je dodati klasi btn visinu, širinu, staviti da je display block i tranziciju radi animacije. Nakon toga dodati <span> elementima da su također display block i tranziciju, te im staviti float stil da su jedan pored drugoga. Kad hoveramo btn element moramo skloniti prvi <span> element, a staviti da drugi poprimi punu veličinu tipke btn.

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

Da bi dodali klik event trebamo javascript i klasu btn-selected. Klasa btn-selected koristi se kako bi dodali zelenu boju elementu i koja drži font awesome icon-u na srediti tipke. U javascript kodu potrebno je dodati klik event te provjeriti da li tipka na koju smo kliknuli sadrži btn-selected klasu. Ako sadrži, ukloniti je i dodati fa-close klasu na drugi <span> element da se tipka vrati u prvotno stanje, ako ne sadrži tu klasu, onda je dodati, a na drugi <span> element dodati fa-check klasu.

Ispod možete vidjeti gotov kod.