Buttons

To make the buttons, I originally intended to make 3 images for each of the 3 buttons; a link, hover and active version. Then I found out about CSS sprites. A big image loads, containing buttons or icons used on the website. Then CSS makes the right parts of that image display at the right time, in the right place.

Apple.com sprites.









Part of the Facebook Sprites:

This makes the page load faster, because there are less image requests.

Mine wont be as complicated as these. I will make one image for each button:

Each has a link and a hover state. (I will only need 3)

This CSS shifts the image up, while only showing half of it, to make it look like the button has been pressed in, or is glowing or changed colour.

When I got these buttons onto my page I couldn't work out how to make them links so I put a text link over each button. 

Then I took out the text from the image and restyled the text on the webpage. That's actually worked out better because if images or css is disabled, the site can still be navigated.

Kirsty suggested using complimentary colours for the rollover, which fits in well with my topic and looks nice.

These are the PNGs I'm now using for the buttons:

The top part is the 'link' and the bottom is the 'hover'.

For the 'active' I have used this CSS to make the text on top glow:

So now they look like this:

The text also gets 10% bigger on the hover and active.