CSS Button without JavaScript

Creating an interface with 3D buttons is possible with only CSS code, and without a line of JavaScript you can have the visual effect of the button pressed by the mouse.

This tutorial shows how, starting from the design of the image with The GIMP.

Creating the button with GIMP

1. Create a new 180 x 28 pixels image, and in advanced options, select a transparent background.
2. Click on the rectangular selection tool in the tool box (the first icon).
3. Thick rounded corner with a radius of 6.
4. Make a selection that corresponds to the size of the whole image.
   
5. Choose a color.
6. Click on the Gradient tool. Make a gradient from bottom to top with a very slight tilt to the left.
7. Make a new selection so it has a margin of 2 pixels, retaining the rounded corners but with a radius of 4.5 now.
8. Return to the Gradient tool. Make a gradient from bottom to top, but from below the image and going above it.
   The result will be a color a little clearer than the bottom edge, and darker than the top one.
   
9. Here is the final result...
   

Using it may be very simple with even some visual effects.

Simple button

The image of the button is used as a background of a link tag.

Sample text texte

The HTML code is minimal:

<a class="button" href="">Sample text</a> 

The design relies entirely on the CSS code:

.button
{
    display:block;
    width:180px;
    height:24px;
    background-image:url(button.gif);
    background-repeat: no-repeat;
    text-align:center;
    padding:4px;
}

The visual effect would be better if the button seemed to be pressed by the mouse.

Button that you press

The CSS is slightly changed, two lines are added:

position:absolute;
margin-top:-2px;

The position is absolute in the container, otherwise shifting the button would also shift the part of the page that follows!
This forces so to add a container with a defined height:

.buttonlist
{
    height:32px;
}

And we add a rule to "press" the button when the mouse passes over:

a.button1:hover 
{
    color:#333;
    margin-left:2px;
    margin-top:0px; 
}

A practical application, a button bar.

Button bar in CSS without JavaScript

Display:block is required to build the buttons. This in turn requires the property position:absolute.
And an absolute position requires to assign an offset to the buttons.

Everything else is defined by the CSS property button1.

CSS:

<div class="bar">
<a class="button1" href="">Button 1</a>
<a class="button1" style="left:192px" href="">Button 2</a>
<a class="button1" style="left:376px" href="">Button 3</a>
</div>

JavaScript:

.button1
{
  display:block;
  width:180px;
  height:28px;
  background-image:url(button.png);
  background-repeat: no-repeat;
  font-weight:bold;
  text-align:center;
  text-decoration:none;
  padding:5px;	
  margin:0;
  position:absolute;
  left:8px;
  margin-top:-2px;
  margin-left:8px;
}
a.button1:visited
{
  color:black;
}
a.button1:hover
{
  color:#333;
  margin-left:10px;
  margin-top:0px;	
}

.bar
{
  position:relative;
  background-image:url(images/wood.jpg);
  padding:8px 0 2px 32px;
  width:600px;
  height:30px;
}

The image of the button.