2011-06-16 28 views
0

我使用PHP创建了Facebook iframe画布应用程序。如何将蓝色facebook按钮添加到画布应用程序

我需要我的按钮看起来像Facebook按钮。

如何做到这一点......任何人都可以共享CSS来做到这一点?

+0

页面使用你为什么不使用实际Facebook的形象呢? – 2011-06-16 15:59:08

+0

我真的不知道任何事情,请建议我,在此先感谢 – Balaji 2011-06-16 16:08:57

回答

4

这里是样式表:

<style> 
.uiButton,.uiButtonSuppressed:active,.uiButtonSuppressed:focus,.uiButtonSuppressed:hover{background:#eee url('images/B4K_BWwP7P5.png') repeat 0 0;border:1px solid #999;border-bottom-color:#888;box-shadow:0 1px 0 rgba(0, 0, 0, .1);-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, .1);cursor:pointer;display:-moz-inline-box;display:inline-block;font-size:11px;font-weight:bold;line-height:normal !important;padding:2px 6px;text-align:center;text-decoration:none;vertical-align:top;white-space:nowrap} 
.uiButton + .uiButton{margin-left:4px} 
.uiButton:hover{text-decoration:none} 
.uiButton:active,.uiButtonDepressed{background:#ddd;border-bottom-color:#999;box-shadow:0 1px 0 rgba(0, 0, 0, .05);-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, .05)} 
.uiButton .img{margin-top:2px;vertical-align:top} 
.uiButtonLarge .img{margin-top:4px} 
.uiButton .customimg{margin-top:0} 
.uiButton .uiButtonText,.uiButton input{background:none;border:0;color:#333;cursor:pointer;display:-moz-inline-box;display:inline-block;font-family:'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;font-size:11px;font-weight:bold;margin:0;outline:none;padding:1px 0 2px;white-space:nowrap} 
.uiButtonSpecial{background-color:#69a74e;background-position:0 -96px;border-color:#3b6e22 #3b6e22 #2c5115} 
.uiButtonSpecial:active{background:#609946;border-bottom-color:#3b6e22} 
.uiButtonSpecial.uiButtonDisabled,.uiButtonSpecial.uiButtonDisabled:active,.uiButtonSpecial.uiButtonDisabled:focus,.uiButtonSpecial.uiButtonDisabled:hover{background:#b4d3a7;border-color:#9db791} 
.uiButtonConfirm{background-color:#5b74a8;background-position:0 -48px;border-color:#29447e #29447e #1a356e} 
.uiButtonConfirm:active{background:#4f6aa3;border-bottom-color:#29447e} 
.uiButtonConfirm.uiButtonDisabled,.uiButtonConfirm.uiButtonDisabled:active,.uiButtonConfirm.uiButtonDisabled:focus,.uiButtonConfirm.uiButtonDisabled:hover{background:#adbad4;border-color:#94a2bf} 
.uiButtonSpecial .uiButtonText,.uiButtonSpecial input,.uiButtonSpecial.uiButtonDisabled .uiButtonText,.uiButtonSpecial.uiButtonDisabled input,.uiButtonConfirm .uiButtonText,.uiButtonConfirm input,.uiButtonConfirm.uiButtonDisabled .uiButtonText,.uiButtonConfirm.uiButtonDisabled input{color:#fff} 
.uiButtonDisabled,.uiButtonDisabled:active,.uiButtonDisabled:focus,.uiButtonDisabled:hover{background:#f2f2f2;border-color:#c8c8c8;box-shadow:none;-webkit-box-shadow:none} 
.uiButtonDisabled .img{opacity:.5} 
.uiButtonDisabled .uiButtonText,.uiButtonDisabled input{color:#b8b8b8} 
.uiButtonDepressed,.uiButtonDepressed .uiButtonText,.uiButtonDepressed input,.uiButtonDisabled,.uiButtonDisabled .uiButtonText,.uiButtonDisabled input{cursor:default} 
.uiButtonLarge,.uiButtonLarge .uiButtonText,.uiButtonLarge input{font-size:13px} 
.uiButtonSuppressed{background:none;border-color:transparent;box-shadow:none;-webkit-box-shadow:none} 
.uiButtonNoText .img{margin-left:-1px;margin-right:-1px} 

</style> 

THE DOM CODE

SILVER BUTTON

<label class="uiButton uiButtonLarge uiButtonText uiButtonDisabled" for="u217078_2323"><input value="Sign Up" onclick="" type="submit" id="u217078_2323"></label> 
<label class="uiButton uiButtonText uiButtonDisabled" for="u217078_2323"><input value="Sign Up" onclick="" type="submit" id="u217078_2323"></label> 
<label class="uiButton uiButtonLarge uiButtonText" for="u217078_2323"><input value="Sign Up" onclick="" type="submit" id="u217078_2323"></label> 
<label class="uiButton uiButtonText" for="u217078_2323"><input value="Sign Up" onclick="" type="submit" id="u217078_2323"></label> 
<br><br> 

蓝色按钮

<label class="uiButton uiButtonLarge uiButtonConfirm uiButtonDisabled" for="u217078_2323"><input value="Sign Up" onclick="" type="submit" id="u217078_2323"></label> 
<label class="uiButton uiButtonConfirm uiButtonDisabled" for="u217078_2323"><input value="Sign Up" onclick="" type="submit" id="u217078_2323"></label> 
<label class="uiButton uiButtonLarge uiButtonConfirm" for="u217078_2323"><input value="Sign Up" onclick="" type="submit" id="u217078_2323"></label> 
<label class="uiButton uiButtonConfirm" for="u217078_2323"><input value="Sign Up" onclick="" type="submit" id="u217078_2323"></label> 
<br><br> 

绿色键

<label class="uiButton uiButtonLarge uiButtonSpecial uiButtonDisabled" for="u217078_2323"><input value="Sign Up" onclick="" type="submit" id="u217078_2323"></label> 
<label class="uiButton uiButtonSpecial uiButtonDisabled" for="u217078_2323"><input value="Sign Up" onclick="" type="submit" id="u217078_2323"></label> 
<label class="uiButton uiButtonLarge uiButtonSpecial" for="u217078_2323"><input value="Sign Up" onclick="" type="submit" id="u217078_2323"></label> 
<label class="uiButton uiButtonText" for="u217078_2323"><input value="Sign Up" onclick="" type="submit" id="u217078_2323"></label> 
<br><br> 

和图像 把图像中的images文件夹,

enter image description here

结果

enter image description here 和你做:)这是我的脚本,我在我的

+0

不适用于页面其应用程序,我可以在我的应用程序中使用它 – Balaji 2011-06-16 16:09:53

+0

它的原始CSS和HTML代码,您可以使用您的应用程序..此代码就像一个正常的CSS模板可用在网站上。这不依赖于Facebook。 – 2011-06-16 16:11:25

+0

如果您发现该答案有用,那么请不要忘记通过单击此答案左侧的小标记将其标记为正确。 – 2011-06-16 16:12:05

相关问题