如何创建类似Apple网站上的按钮？

Question

I would like to know how to create buttons like the ones on Apple's main page ?

Can anyone help me get started or point me in the direction of a tutorial?

Answer 1

Take your pick from these google results Or search on your own for "CSS Sprites". The basic technique is you put all the various states and images in one graphic, and then you use the :hover pseudo slector to change the background-position declaration to move the background image to the coordinates that contain the proper state(s).

Answer 2

As an alternative to prodigitalson suggestion (which is the way Apple does it), you could consider using current CSS 3 styles.

Gradients: http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/ Text Shadows (for embosed text): http://www.w3.org/Style/Examples/007/text-shadow.en.html Roundedc corners: http://www.css3.info/preview/rounded-border/

etc.