Web Development

General discussion


CSS text button rollovers revisited

By MaryWeilage Editor ·
This week's Design and Usability Tactics e-newsletter revisits the topic of CSS text button rollovers. Do you think you'll use the technique described in this e-newsletter to make the entire box a pure CSS text button that is clickable? How often do you use CSS in your development environment?

If you aren't subscribed to the Design and Usability Tactics TechMail, visit our e-newsletter subcenter to subscribe to this free e-newsletter:

* Please delete any extra spaces that appear when you paste this link into your browser.

This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Comments

Collapse -


by Robynls In reply to CSS text button rollovers ...

I have applied your suggestion to a new site I am developing with some success. A couple of suggestions I would make are:

* since <li> indents the button, I have had to use a margin-left of -30px to get the menu 'back in it's box'

* to give the impression of a pushed button, I have added border: 2px #ffffff inset; to my #navpanel li a:active rule. This does result in a small problem in that the border: 2px #ffffff outset; of the #navpanel li rule stays active so I end up with a double bordered button for a moment, but it still looks 'pressed'

Thanks for the interesting newsletter articles

-- Robyn Smith --
Sydney, Australia

Related Discussions

Related Forums