Twitter Like Follow And Unfollow With Jquery

In this article i am going to show how to create twitter like follow and unfollow buttons.

Lets take a look.

Live DemoDownload Script

JQuery Function

      <script>$(document).ready(function(){
  $('.following_button').hover(function(){
      $(this).text("Unfollow");
    },function(){
       $(this).text("Following");
    });
      $('.following_button').click(function(){
    $(this).toggleClass('following_button follow_button').unbind("hover");
    if($(this).is('.follow_button')){
          $(this).text("Follow");
    }
    else{
          $(this).bind({
            mouseleave:function(){$(this).text("Following");},
            mouseenter:function(){$(this).text("Unfollow");}    
        });
    }
  });
});</script>

Html

<div class="container">
      <div class="content">
        <div class="acc"> <a href="https://twitter.com/vinothkumar23"> <img class="pic" src="images/smallred.png" /> <strong class="acc_name">Vinothkumar</strong> <span class="twitter_username ">@vinothkumar23</span> </a> <span class="refbutton following_button">Following</span> </div>
        <div class="acc"> <a href="https://twitter.com/vinothkumar23"> <img class="pic" src="images/small.png" /> <strong class="acc_name">Google</strong> <span class="twitter_username">@google</span> </a> <span class="refbutton following_button">Following</span> </div>
        <div class="acc"> <a href="https://twitter.com/vinothkumar23"> <img class="pic" src="images/smallred.png" /> <strong class="acc_name">Twitter</strong> <span class="twitter_username ">@twitter</span> </a> <span class="refbutton following_button">Following</span> </div>
      </div>
    </div>

Styles

.follow_button
{
color: #333;
background-color: whiteSmoke;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#E6E6E6));
background-image: -webkit-linear-gradient(top, white, #E6E6E6);
background-image: -o-linear-gradient(top, white, #E6E6E6);
background-image: linear-gradient(to bottom, white, #E6E6E6);
background-image: -moz-linear-gradient(top, white, #E6E6E6);
background-repeat: repeat-x;
border: 1px solid #BBB;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #E6E6E6 #E6E6E6 #BFBFBF;
border-bottom-color: #A2A2A2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.following_button{
background-color: #49AFCD;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5BC0DE), to(#2F96B4));
background-image: -webkit-linear-gradient(top, #5BC0DE, #2F96B4);
background-image: -o-linear-gradient(top, #5BC0DE, #2F96B4);
background-image: linear-gradient(to bottom, #5BC0DE, #2F96B4);
background-image: -moz-linear-gradient(top, #5BC0DE, #2F96B4);
background-repeat: repeat-x;
border-color: #2F96B4 #2F96B4 #1F6377;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.following_button:hover{
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #BD362F;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#EE5F5B), to(#BD362F));
background-image: -webkit-linear-gradient(top, #EE5F5B, #BD362F);
background-image: -o-linear-gradient(top, #EE5F5B, #BD362F);
background-image: linear-gradient(to bottom, #EE5F5B, #BD362F);
background-image: -moz-linear-gradient(top, #EE5F5B, #BD362F);
background-repeat: repeat-x;
border-color: #BD362F #BD362F #802420;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}   

Please share your comments and feedback.Thanks.