CSS buttons

by Joe Gillespie — Nov 1, 2002

Using the 'border' attributes of a CSS box, you can outline a box in another colour but as you can address each of the four borders separately – top, right, bottom, left – pseudo 3D effects are very easy. Giving the top and left edges a 'highlight' colour and the bottom and right a 'shadow' colour makes the buttons seem to rise away from the background. Reverse the situation for the rollover state (or the 'active' state), and the buttons sink into the page.

First of all, a column (box) called '#buttons' is set up and is given all the constant text attributes that can be inherited by the individual buttons named b1 to b6. These buttons are then given anchor (a) classes for the various states. As the initial and visited states should be identical, we can use a shortcut to declare the classes. Just separate the class names with commas.

.b1 a,.b2 a, .b3 a, .b4 a,.b5 a, .b6 a, .b1 a:visited, .b2 a:visited, .b3 a:visited, .b4 a:visited, .b5 a:visited, .b6 a:visited
      {
      color:aqua;
      text-decoration:none;
     background-color:#002198;
     margin-top:5px;
     margin-bottom:5px;
     padding:3px 5px;
     border-style:solid;
     border-width:2px;
      border-color:#3252ba #0e215b #0e215b #3252ba;
     width:85%;
     visibility:visible;
     display: block
      }

The 'hover' state changes the text color to yellow and the border highlights and shade colors are reversed.

.b1 a:hover, .b2 a:hover, .b3 a:hover, .b4 a:hover, .b5 a:hover, .b6 a:hover
     {
      color:yellow;
      background-color:#002198 ;
      text-decoration:none;
      border-color:#0e215b #3252ba #3252ba #0e215b
      }

I'm using 3px 'padding' top and bottom to vertically centre the text inside the button boxes and 5px padding on the left and right, I can't just specify a box width in pixels for the buttons as I would like to or they will end up different widths in Explorer from all the other browsers. Specifying the width as 85% means they will be that percentage of the fixed width '#buttons' box in all browsers. View the source.

The other trick I need to explain here is the situation where anti-aliased text (the word 'blues') is straddling two different background images. To make sure the anti-aliasing 'fringe' colors are correct, the text really needs to be set against exactly the same background as it will be eventually on the page. As the whole layout was pre-planned in Photoshop, that wasn't too difficult.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float