First, we need CSS style like this:
/* facebook fake button Experiment - April 22th 2010 - Sukma Gemala */
#Fbox{background-color:transparent;width:290px;margin:3px}
#Fbox *{display:block;overflow:hidden}
.container{position:relative;width:100%;height:auto;overflow:hidden;border-bottom:1px solid #ECEEF5;padding:5px 0}
#Fbox ._button,#Fbox .text{background-position:-1px -47px;background-position-x:-1px;background-position-y:-47px}
.clearfix::after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden}
._button .text{background:url(http://static.ak.fbcdn.net/rsrc.php/v1/z7/r/ql9vukDCc4R.png) -1px -33px no-repeat;background-attachment:initial;background-clip:initial;background-color:initial;background-image:url(http://static.ak.fbcdn.net/rsrc.php/v1/z7/r/ql9vukDCc4R.png);background-origin:initial;background-position-x:-1px;background-position-y:-33px;background-repeat-x:no-repeat;background-repeat-y:no-repeat;color:#3B5998;padding-left:17px;white-space:nowrap}
#Fbox ._button{background-color:#ECEEF5;border-color:#CAD4E7}
#Fbox ._button:hover{background-color:#eceef5;border-color:#9dacce}
#Fbox a._button{color:#3B5998;cursor:pointer;text-decoration:none;font:normal .9em "lucida grande",sans-serif;line-height:14px;text-align:left;float:left;border:1px solid black;margin:2px;padding:4px 5px;-webkit-border-radius:3px;border:1px solid #CAD4E7;border-bottom-left-radius:3px 3px;border-bottom-right-radius:3px 3px;border-top-left-radius:3px 3px;border-top-right-radius:3px 3px;-moz-outline-style:none;}
#Fbox .likesarwa2{width:90px;height:90px}
#Fbox .likesarwa{width:250px;height:82px}
#Fbox #ifrm a{text-decoration:none;color:#617185;border:none;font-size:13px}
#Fbox .custom_images {text-align:center}
#Fbox .custom_images a{width:195px;height:32px}Second, please insert this HTML code:
<div id="Fbox"><div class="container"> <a title="Google" target="_blank" href="http://google.com/" class="_button clearfix"> <span class="text">Go Google</span></a> <a title="Facebook Fake Button Sample" target="_blank" href="http://sarwasunda.blogspot.com/" class="_button clearfix like"> <span class="text">other sample</span></a></div> </div>
Original font needed is "lucida grande"and the result for above code is look like this
Please view this nice live Facebook Fake Button demo (its source)
Add Comments