follow button

by Phillip

HTML

<div class="container">
    <button class="btn followButton" rel="6">Follow</button>
</div>

CSS

body {
    background: #fafafa;
}
.container {
    margin: 20px;
}


.btn {
    cursor:pointer;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    
    border:1px solid #a6a6a6;
    border-top-color:#bdbdbd;
    border-bottom-color:#8b8a8b;
    
    padding:9px 14px 9px;
    
    color:#666666;
    font-size:11px;
    background-position:0px 0px;
    
    text-shadow: 0 1px 0 #fff;
    font-weight:bold;
    
    background-color: #ffffff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e8e8e8)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #ffffff, #e8e8e8); /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image:    -moz-linear-gradient(top, #ffffff, #e8e8e8); /* FF3.6 */
    background-image:     -ms-linear-gradient(top, #ffffff, #e8e8e8); /* IE10 */
    background-image:      -o-linear-gradient(top, #ffffff, #e8e8e8); /* Opera 11.10+ */
    background-image:         linear-gradient(top, #ffffff, #e8e8e8);
    
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    
    
}

.btn:hover {
    color:#333;
    border-color:#999;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f6f6f6)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #ffffff, #f6f6f6); /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image:    -moz-linear-gradient(top, #ffffff, #f6f6f6); /* FF3.6 */
    background-image:     -ms-linear-gradient(top, #ffffff, #f6f6f6); /* IE10 */
    background-image:      -o-linear-gradient(top, #ffffff, #f6f6f6); /* Opera 11.10+ */
    background-image:         linear-gradient(top, #ffffff, #f6f6f6);
}
.btn:active{
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#ffffff)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #e8e8e8, #ffffff); /* Chrome...

JavaScript

$('button.followButton').live('click', function(e){
    e.preventDefault();
    $button = $(this);
    if($button.hasClass('following')){
        
        //$.ajax(); Do Unfollow
        
        $button.removeClass('following');
        $button.removeClass('unfollow');
        $button.text('Follow');
    } else {
        
        // $.ajax(); Do Follow
        
        $button.addClass('following');
        $button.text('Following');
    }
});

$('button.followButton').hover(function(){
     $button = $(this);
    if($button.hasClass('following')){
        $button.addClass('unfollow');
        $button.text('Unfollow');
    }
}, function(){
    if($button.hasClass('following')){
        $button.removeClass('unfollow');
        $button.text('Following');
    }
});