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(); }); }
Good evening guys! You can hire a knowledgeable writer just use essaypro login to paraphrase your work. Don’t just give up on a paper if it lacks originality. Get professional helper who can re-phrase the text without changing your ideas. Pass any plagiarism screening with ease!
ReplyDelete