I know that there are many other ways to do this out there, but I just had to come up with my own, that pleased me visually — you know how it is…
The buttons can be found here: http://media.dkpn.jp/css/css3-buttons-01/ (CSS)
They should work with Firefox and Webkit based browsers (Safari, Chrome).
The basic styling looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | a._but {text-decoration: none; outline: none;} a._but:focus {–moz–outline-style: none;} ._but { background: #ccc; border:1px solid #d9d9d8; padding:7px 10px; font-size:14px; text-shadow: 0px 1px 0px #fff; font-weight: bold; color:#000; box-shadow: 0px 1px 0px #666; cursor: pointer; white-space:nowrap; } |
You’ll notice the pseudo class :focus, which tells Firefox not to add dots around a clicked element (as found here).
The other “new” elements are the text-shadow property, which seems to work without any prefix on my versions of Firefox (3.6.12) and Chrome (5.0.375.70)/Safari(5.0.1), and the box-shadow one that just doesn’t work for now…
The white-space part if for inline links, to avoid them being cut in two.
The styling for Gecko-based browsers (Firefox):
1 2 3 4 5 6 7 | background: –moz-linear-gradient( center bottom, rgb(224,224,224) 26%, rgb(238,238,238) 63% ); –moz-border-radius: 10px; –moz-box-shadow: 0px 1px 0px #666; |
and Webkit-based browsers (Chrome/Safari/Webkit):
1 2 3 4 5 6 7 8 9 | background: –webkit-gradient( linear, left bottom, left top, color-stop(0.26, rgb(224,224,224)), color-stop(0.63, rgb(238,238,238)) ); –webkit-border-radius: 10px; –webkit-box-shadow: 0px 1px 0px #666; |
Rounded corners, a subtle gradient for the background, and a 1px drop shadow. I must confess that I used this tool to grab the correct rgb values. Would love hex colors + alpha…
Pretty straightforward. I added two pseudo classes, hover and active for the button states, using the same kind of properties. The only part that might need attention would be this one maybe:
1 2 | –moz-box-shadow: 0px –1px 0px #666; –webkit-box-shadow: 0px –1px 0px #666; |
The negative value of the box shadow generates an inner shadow, which I used to give the impression the button is pressed.
I guess you could just then pile up vendor prefixes as you want…
2 Comments
jo!!! i like your buttons :)
Thank you man :)