Shiny CSS buttons

Drew McLellan and Brian Suda, cura­tors of the now tra­di­tional “24 Ways” web devel­op­ers advent cal­en­dar kindly asked me to write some­thing for the 2008 edi­tion.

So, hav­ing been play­ing around a lot with CSS3 and exper­i­men­tal CSS cur­rently sup­ported in var­i­ous browsers, I put together a proof of con­cept using CSS gra­di­ents (cur­rently in webkit browsers), text-​​shadow (webkit, Opera and Firefox 3.1) box-​​shadow (webkit and report­edly Firefox 3.1), an border-​​radius (webkit and Firefox 3+), to cre­ate but­tons which look like this

(with not an image in sight!)

So head on over to 24 ways and get shin­ing up the web.

Your opinion:

XHTML: You're allowed to use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>