Skip to content

Pilmore, Lee

456 - Bulletproof shrinkwrapping buttons

Filed under CSS, Design, Markup on May 23rd, 2007 |

This is a demo document for the technique described in the article Creating bulletproof graphic link buttons with CSS.

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

A bag-full of mark-up required but pretty neat.

Picture house

Coming from Flickr

Diversions