Pure CSS Buttons

<html>
  <head>
    <style>
      .but{padding:0px;width:8em}
      .but a{display:block;text-decoration:none;color:black;background-color:#954A00;
            border:3px outset #A67700;border-bottom-color:#6E3C00;border-top-color:#6E3C00;
            padding-top:2px;opacity:1;filter:alpha(opacity=100)}
      .but a:hover{background-color:#954A00;border:3px #603C00 solid;border-bottom-color:#927700;
                      border-right-color:#927700;opacity:0.8;filter:alpha(opacity=80);}
    </style>   
  </head> 
  <body>
    <div class="but"><a href="javascript:alert('Click!')">Sample</a></div> 
  </body>
</html>

Sample

The code above is an excerpt of what we use to deliver the sample button above. The salient features of this technique are as follows

We create an HTML division. In this case we specify its width. Typically this would not be necessary since the division would occupy the clientwidth of a suitably sized parent. However, in that case it would be necessary to change the padding:0px setting - wholly unnecessary here - in order to make the button sit proud of its container.
Inside the division we create an anchor element. Since the anchor is nested inside the division it gets styled using the .but a nested style rule defined in the head section. The logic used in defining this nested style goes like this
- The effect we have set out to create is that of push buttons used on appliances, such as the monitor you are using to view this page.
- The button has a flat vertical surface and bevelled edges.
- Light is assumed to shine on the button from a source located above it and somewhat to the left.
- In its normal, inactive (depressed), state the top and left bevels have rather more light than flat surface. Therefore, we make the color of these two bevels lighter by setting the border color somewhat lighter than the background color used for the flat surface.
- The bottom and right bevels, on the other hand, get have rather less light shining on them in the inactive state so we make them somewhat darker by setting the border-bottom-color and border-right-color properties.
- We set the border width to 3px so as to get a clearly visible bevel.
- In the inactive state the button is made be fully opaque.
- In its active (pressed) state the lighted state of the bevels and the flat vertical surface changes. Now it is the top and left bevels which have the least amount of light shining on them whilst the bottom and right bevels capture the maximum quantity of light. We allow for this by styling the .but a:hover pseudo-class.
- For good measure we also make the button slightly transparent in its active state
We make the anchor function as a block element by specifying display:block. This has the effect of making it occupy the entire client width of its parent division and displaying its borders.

It should be noted that the opacity setting has little effect in IE7-. You may wonder why we have chosen to embed anchors inside a division rather than simply styling the division to respond to the mouse cursor hovering over it. This is because, only anchor elements supported the hover pseudo-class prior to IE7. A fringe benefit - we don't need to write an onclick event handler and use JavaScript as would have been required if we had used div hover effects.

We should emphasize that the technique described here is only one of many possibilities. It is certainly possible to create even more attractive effects by using sliding background images etc. In our view, the benefits that accrue from such techniques are far outweighed by the work they entail, the increased server traffic they engender...

Finally, note that creating a selection of color shades to get 3D effects is a great deal easier if done using the HSL model - first select a suitable Hue and then adjust the Saturation and/or Luminosity settings. This is best done using the ExplainThat! color converter.

▼Jump To...

◄ ►