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:

  1. create your button as one image. the rollover state goes below the out state.
  2. create a div with the class 'css_rollover' or 'button' or something meaningfull
  3. insert an anchor tag into the div and add your link.
  4. insert an image into the anchor tag and link it to your button image.
  5. 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).
  6. in the css, set it's position to absolute or relative and give it an overflow of hidden.
  7. 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
CSS