CSS ROLLOVERS
DESCRIPTION
i keep forgetting how to do a simple css rollover button so i threw it up here so i can check when needed! there's many ways to do this but this is the method i used:
- create your button as one image. the rollover state goes below the out state.
- create a div with the class 'css_rollover' or 'button' or something meaningfull
- insert an anchor tag into the div and add your link.
- insert an image into the anchor tag and link it to your button image.
- in your css, create a style for your button class. set it's width and height to the button's dimensions (only one button so if the image is 100px high then this should be 50px).
- in the css, set it's position to absolute or relative and give it an overflow of hidden.
- add a new rule for the anchor's hover state and set its position to absolute or relative and its margin-top to negative half the image height.
this has been tested in ie6-9, firefox, chrome, opera and safari
TECHNOLOGIES
=============================
OPEN SOURCE






