You see the "search buttoN". it's really nice.
A:
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.
David
2010-04-01 22:34:53
There doesn't actually appear to be a background image, but rather a browser generated gradient.
alex
2010-04-01 22:42:18
Can a gradient like this be seen in IE these days?
Frederik Wordenskjold
2010-04-01 22:52:07
@Frederik Wordenskjold: I think IE was the first browser to implement gradients, albeit through the proprietary `filter` property. *edit* see Matt's answer.
Andy E
2010-04-01 23:13:04
+4
A:
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;
}
Matt
2010-04-01 22:38:23
+2
A:
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.
steve_c
2010-04-01 22:38:52
A:
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
alex
2010-04-01 22:39:50
A:
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;
}
ideotop
2010-04-01 22:42:39
A:
I thinkg the better options is to use css SPRITES actually is a technique and you dont have to make any line of javascript...
http://css-tricks.com/css-sprites/
and is CROSS BROWSING!!!
nahum silva
2010-04-02 06:12:17