Wednesday, May 23, 2007

456 Berea St: Creating bulletproof graphic link buttons with CSS

http://www.456bereastreet.com/archive/200705/creating_bulletproof_graphic_link_buttons_with_css/
"

A CSS problem I have been wrestling with lately is how to create a bulletproof shrinkwrapping graphic button. By that I mean an image-based button that will expand and contract to fit the amount of text it contains. It is a very useful technique for CMS-driven sites that allow the client to change the text that is displayed on buttons, as well as for multilingual sites.

A successfull bulletproof image-based button should:

  • Automatically grow horizontally to fit any amount of text
  • Grow horizontally and vertically if text size is increased or if the text wraps to multiple lines
  • Retain its appearance within reasonable limits
  • Be able to have rounded (or other non-square) corners
  • Have no unclickable areas
  • Be readable when images are disabled"

No comments: