Sam Brown

Single Image Rollover Buttons using CSS

“For an up-and-coming site that I am working on I wanted to create three support buttons at the bottom of the site in the footer that were images, had rollover states and degraded nicely into a textual unordered list. I could not immediately find any good tutorials so I created one myself.”

My inspiration for these buttons were from Dan Cederholms RSS button, this fueled my fire for a set of three on my new project. I created the buttons in the same style and used Kottkes great free font, Silkscreen (just incase anyone wants to create their own buttons). The final image that will be used for these buttons is below:

The top row has the normal state, and the second row has the over states (a slightly darker shade of red).

The XHTML Markup

Because I wanted these to be text links if CSS was unavailable or disabled I created an unordered list with the id #btns. Each list item also has its own id, #btn1, #btn2 and #btn3.

  1. <ul id="btns">
  2. <li id="btn1"><a href="#" title="Valid XHTML">XHTML</a></li>
  3. <li id="btn2"><a href="#" title="Valid CSS">CSS</a></li>
  4. <li id="btn3"><a href="#" title="RSS Feed">RSS</a></li>
  5. </ul>
  6. Download this code: /code/rollover1_markup.txt

At this point it would look like this.

The Global Reset

I always use the Global Reset in my CSS files, this sets all margins and padding values to zero. This way I have much more control over the way things look, I set the values myself instead of using each individual browsers set of values. I have also added a background colour to make these buttons stand out more, this is also the same colour used in my project.

  1. * {margin: 0; padding: 0;}
  2. body {background-color: #888;}
  3. Download this code: /code/rollover2_globalreset.txt

Styling the unordered list and list items

This is where we change the style of the unordered list. The #btns ul id removes the bullets from the list by setting the style to none. The #btns li does several things, I’ll describe these line by line.

The first line floats all items left, causing them to sit in a horizontal row. The second line sets the height of the list items, this is the height value of each individual button. Line three fixes a bug in IE & Opera where it would take the height to be the height of the text, which we will later hide. The last line creates some padding to the right of each button so that their edges are not touching each other, if you wanted your items to be set quite far apart this would be the value to change.

  1. #btns ul {list-style: none;}
  2. #btns li {
  3. float: left;
  4. height: 13px;
  5. overflow: hidden;
  6. padding-right: 2px;
  7. }
  9. Download this code: /code/rollover3_stylingul.txt

Setting the widths and link styles for the buttons

#btn1, #btn2 and #btn3 all set the width for each button respectively. You will notice that the XHTML button is a bit wider than both the CSS & RSS buttons.

The #btns a styles the links. The first line sets the a tag to be a clickable block (because we will hide the text that you would normally click on). The second line, sets the height of the link and the third hides the text by moving it -9999px off screen.

  1. #btn1 {width: 33px;}
  2. #btn2 {width: 22px;}
  3. #btn3 {width: 22px;}
  4. #btns a {
  5. display: block;
  6. height: 13px;
  7. text-indent: -9999px;
  8. }
  9. Download this code: /code/rollover4_buttons1.txt

Setting the link and hover states for the buttons

#btns a is important, this puts the background image behind each of the a tags. The second, third and fourth lines in this example code sets the position of the background image for each link. Remember, we gave each item in the list an id. We use the background-position CSS element to set the x and y co-ordinates of the image.

The fifth, sixth and seventh lines in the below example code set the hover states for each list item. Notice the x positions are the same for the a and a:hover elements, but the y positions for the a:hover are set -14px, this is because we want to use the second row of images. (I put a 1px gap between the first and second rows in my image, thus this value does not match the height property set previously.)

  1. #btns a {background: url(buttons.gif) no-repeat;}
  2. #btns #btn1 a {background-position: 0 0;}
  3. #btns #btn2 a {background-position: -34px 0;}
  4. #btns #btn3 a {background-position: -57px 0;}
  5. #btns #btn1 a:hover {background-position: 0 -14px;}
  6. #btns #btn2 a:hover {background-position: -34px -14px;}
  7. #btns #btn3 a:hover {background-position: -57px -14px;}
  8. Download this code: /code/rollover5_buttons2.txt

That’s it! The Finished Example

The finished example was created for a site that I am working on at the moment, however, feel free to use these buttons on your site.

To see the completed code you can view the source of the finished example.

Post a link to this on Twitter ↩


There currently aren't any comments on this post, leave the first?

Commenting has closed for this article. Feel free to me.

Sam Brown co-founded Iterate, and was previously VP of Design at Foursquare. Based in NYC.