This type of Follow button design will encourage positive attitude of users. This button will give more importance to follow others rather than un-following. I got inspired from www.behance.net to design this button.

CSS :

a.button {
    text-align: center;
    background-origin: padding-box;
    background-size: auto;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 23px;
    outline-color: rgb(255, 255, 255);
    outline-style: none;
    outline-width: 0px;
    text-decoration: none;
    text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 0px;
    vertical-align: middle;
    padding: 15px 30px 15px 30px;
    zoom: 1;
    width: 180px;
}

a.follow {
    background-image: linear-gradient(rgb(0, 150, 255), rgb(0, 93, 255));
    color: rgb(255, 255, 255);
    border-bottom-color: rgb(0, 113, 224);
    border-left-color: rgb(0, 113, 224);
    border-right-color: rgb(0, 113, 224);
    border-top-color: rgb(0, 113, 224);
}

a.follow:hover,a.follow:active {
    background: linear-gradient(#008aea, #024dcf);
    border-color: #0055a7;
}

a img {
    width: 14px;
    margin-right: 3px;
}

a.unfollow {
    color: #6e6e6e;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5),
        to(#F1F1F1));
    background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5),
        to(#F1F1F1));
    border-bottom-color: #dcdcdc;
    border-left-color: #dcdcdc;
    border-right-color: #dcdcdc;
    border-top-color: #dcdcdc;
}

a.unfollow:hover,a.unfollow:active {
    background: linear-gradient(#eb3845, #d9030a);
    border-color: #e7473c;
    color: #fff;
}

Markup :

<a href="#" class="button unfollow"><img src="/img/following.png"/> <span>Following</span></a>

<a href="#" class="button follow"><img width="10px" src="/img/follow.png"/> <span>Follow</span></a>

jQuery :

$(function(){
     initiateFollow();
});

function initiateFollow() {  
      $("a.unfollow").bind("mouseover",function(){
       $(this).children("img").attr("src","/img/unfollow.png");
       $(this).children("span").text("UnFollow");
      });

      $("a.unfollow").bind("mouseout",function(){
       $(this).children("img").attr("src","/img/follow.png");
       $(this).children("span").text("Following");
      }); 
      
      $("a.unfollow").bind("click",function(){     
        $(this).children("img").attr("src","/img/follow.png");
        $(this).children("a.unfollow span").text("Follow");
        $(this).removeClass("unfollow");
        $(this).addClass("follow");
        $(this).unbind();
        initiateFollow();
      });
      
      $("a.follow").bind("click",function(){
        $(this).children("img").attr("src","/img/unfollow.png");
        $(this).children("span").text("UnFollow");
        $(this).removeClass("follow");
        $(this).addClass("unfollow");
        $(this).unbind();
        initiateFollow();
      });
}

2 comments:

  1. Good blog.Are you also searching for Help With My Nursing Paper? we are the best solution for you. We are best known for delivering nursing writing services to students without having to break the bank.

    ReplyDelete
  2. I want to always read your blogs. I love them Are you also searching for Nursing Pico Writing Help? we are the best solution for you. We are best known for delivering Nursing Pico writing services to students without having to break the bank

    ReplyDelete

Blogroll

Popular Posts