General discussion

  • Creator
  • #2296846

    CSS text button rollovers revisited


    by maryweilage ·

    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:;;tag=fb

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

All Comments

  • Author
    • #2673190


      by robynls ·

      In reply to CSS text button rollovers revisited

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

      * since

    • 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