Thursday, September 2, 2010

css3 buttons

The technique described here is is my favourite its benefits are:
http://papermashup.com/pretty-css3-buttons/

Newer CSS3 browsers get rounded corners, text shadow and box shadow and gradient.

Non CSS3 capable browsers get a square coloured gradient button, which looks styled enough to suffice as a button.

I prefer not to have the gradient in CSS3 for two reasons
1/ I want non css3 browsers to get some love
2/ I want the button code to be adaptable to different coloured buttons easily, and simply use the background property for changing the button colour.

Uses a transparent .png for the gradient, which means it is adaptable for any colour button, AND can be seen in IE7, IE8, and IE6 with alpha image loader filter if you care.

see also:
http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/
http://somadesign.ca/2010/realistic-looking-css3-buttons/

http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
http://blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/