how can i make my webpages buttons look like those of facebook buttons?

Could somebody please share a script here to make my webpage buttons look and feel like those of Facebook or at least to some extent. Thanks in advance. I'm very curious to know this because it has been 7 days trying to do so, with the help o开发者_开发知识库f css, but had not succeeded. Please help me.

---

I'd recomment use a tool like the Chrome Development Tools or the Web Development Tools for firefox and simply inspect the button which style you want to mimic. I just found a button on Facebook and it seems they're using a label container with this stylesheet:

webkit-box-shadow: rgba(0, 0, 0, 0.046875) 0px 1px 0px 0px;
background-attachment: scroll;
background-clip: border-box;
background-color: #DDD;
background-image: none;
background-origin: padding-box;
border-bottom-color: #999;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #999;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #999;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #999;
border-top-style: solid;
border-top-width: 1px;
color: #666;
cursor: pointer;
direction: ltr;
display: inline-block;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 11px;
font-weight: bold;
height: 16px;
line-height: normal;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-y: visible;
padding-bottom: 2px;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
text-align: center;
text-decoration: none;
unicode-bidi: normal;
vertical-align: top;
white-space: nowrap;
width: 67px;

Just have a look at what those usefull addons can tell you to see how others made their CSS.

Cheers!

---

All you need to do is to assign some style to your button using CSS. In order to assign style to a button, you need to set some style to INPUT[type="submit"]. Here's an example:

INPUT[type="submit"]
 {
     */ put your styles here */
 }

---

Welcome Amit,

I agree with Tim, it's difficult to help you without knowing your code. Still, you might want to look at Firebug if you want to learn from other websites. It's a plugin for firefox which helps you to analyse the code of almost any given non-Flash website. Install it and right click and select inspect element.

If you use Google Chrome such a functionality is available outside the box like brafales says. However, I find Firebug a little more comfortable, especially to newbies.

You can learn a lot by browsing any website and edit things online. You will immediately see the results and be able to tell what different CSS styles cause.

---

For a full cross-browser solution, you could achieve this by using css sprites in this way (I have the violet sprite image currently available :D ):

sprite image (light gradients):

markup

<input value="Share" type="button" />
<br /><br />
<input value="Comment" type="button" />

css

input[type="button"]{
    background: url(spriteImgUrl) repeat-x scroll;
    padding: 6px 10px;
    color:#FFFFFF;
    padding:4px 6px;
    font-size:12px;
    font-weight:bold;
    border:1px solid #3D197C;
    cursor:pointer;
}
input[type="button"]:hover{
    background-position: 0 -48px;
}
input[type="button"]:active{
    background-position: 0 -96px;
}

fiddle: http://www.jsfiddle.net/steweb/WxCmB/