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