The internet is full of examples of buttons. Usually the ones I see use 2 or 3 images and CSS Sprites or Sliders or a combination of both. I wanted a single image button so I could decrease my HTTP requests.
First, I needed a button image. Below is a image I modified from this example. The image includes left, right, and center portion of button. The buttons are not perfect but this is just a proof of concept.
Next, using CSS, I made a button class that uses sprites and slider techniques.
.button {
display: inline-block;
height: 34px;
background-image: url('button.png'), url('button.png'), url('button.png');
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left 0px, right -136px, left -68px ;
background-clip: border-box, border-box, content-box;
-webkit-background-clip: border-box, border-box, content-box; /* Safari */
padding: 0px 20px 0px 20px;
color: black;
font-family: Arial;
font-weight: bold;
line-height: 34px;
text-align: center;
}
.button:hover {
color: white;
background-image: url('button.png'), url('button.png'), url('button.png');
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left -34px, right -170px, left -102px ;
}
This method uses one less image and less CSS then the example cited above. I used a span for the actual container.
<span class="button">TEST BUTTON</span>
What it looks like
