Home/ Questions/Q 6054059
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T08:06:35+00:00

I’m creating a Facebook iframe canvas app using PHP. I need to my button

  • 0

I’m creating a Facebook iframe canvas app using PHP.

I need to my button to look like a Facebook button.

How to do this … can any one share the CSS to do that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is the STYLESHEET:

    <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>

    BLUE BUTTON

    <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>

    GREEN BUTTON

    <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>

    AND THE IMAGE
    Put the image in the images folder,

    enter image description here

    The RESULT

    enter image description here
    And you are done 🙂 this is my script that i use on my pages

    • 0