How do I get the same buttons as Youtube?

http://www.youtube.com/

You see the "s开发者_如何学JAVAearch buttoN". it's really nice.

---

Just look at their CSS.

.yt-uix-button {
    height:2.0833em;
    border:1px solid #ccc;
    background:#f6f6f6;
    background-image:0;
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#EFEFEF)";
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    white-space:nowrap;
    vertical-align:middle;
    cursor:pointer;
    overflow:visible;
    padding:0 .5em;
}

.yt-uix-button:hover {
    -webkit-box-shadow: #999 0px 0px 3px;
    background: #F3F3F3 -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#EBEBEB));
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#EBEBEB));
    border-color: #999;
    outline: 0px;
}

---

You could use jQuery UI button. That will get you most of the way, then you just need to customize a theme to get the look and feel.

Here's a good theme to get you most of the way there.

---

A combination of background images, colors, and borders.

---

Depends on how portable you want it to be.

Firefox 3.5 introduced the -moz-box-shadow tag, which you could put into a hover attribute.

---

It does a few neat CSS3 things, such as

• Gradient: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 #F6F6F6
• Border Radius: 3px 3px 3px 3px

And it looks like a box shadow on :hover

---

You can try Zurb css

.awesome{
background: #222 url(/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}