Awesome Like Button

by Sakib Ahmed

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<a class="like" href="#"><span>Follow</span></a>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
.like{
    background-color:#3B5998;
    color:#fff;
    border-radius:3px;
    width:100px;
    height:40px;
    line-height:40px;
    vertical-align:middle;
    text-align:center;
    display:block;
    text-decoration:none;
    font-family: 'Open Sans', sans-serif;
    transition: background 1s;
}
.like:hover{
    background-color:#6DA4ED;
}
.liked{
    background-color:#A6D66B;
}

JavaScript

$('.like').click(function(){
    var text = $('.like span').text();
    if( text == "Follow" ){
       $('.like span').text('Following');
       $('.like').addClass('liked');
    }else{
        $('.like span').text('Follow');
        $('.like').removeClass('liked');
    }
});