Download Project: WebPepperButton.zip (46.59 kb)

Horizontal and Vertical Image Button Lists using CSS

There is not much time devoted to this in the life-cycle of a project, but when you need to do it again, you probably ask yourself, "how did I do it?" In this sample project, we will provide the most commonly used ways of doing it within CSS. It is quite simple to markup, the toughest part is in the design of the graphics.

What's Covered:

• Horizontal Layout
• Vertical Layout
• Images Only
• Images with Text
• When to use Classes or ID's

We will use a single image for each button to show: default, hover and active (on-click) states. In order keep to things simple, no events have been attached to the various states, that will be left up to you or possibly in a later post.

the Horizontal Layout: Images Only

Let's start with this one, it's quite handy if you want to present a timed slide-show. Personally, I like to see the button image in the order of default, hover and then active, but with the [Stop] button image this is not true and it is shown in the css how to handle this.

Horizontal Button List

Notice there are only 4 images: Back, Stop, Play and Forward. The [Back] and [Forward] buttons only have two states because that's all that is needed, the other two have three states (shown below). The default image of the [Stop] button is the 3^rd segment of the image, all the others are the 1^st segment.

Button States

The Html markup, is simple. Here we set the unordered-list tag with a class [horizontal_list], because we may want to use more than one horizontal list on the page. Also, we define all div tags within each list-item by setting the IDs. By setting these IDs, we can only use these elements (our image buttons) once, otherwise we would need to use this Html markup within a user control.

<div>
  <ul class="horizontal_list">
    <li><div id="back"></div></li>
    <li><div id="stop"></div></li>
    <li><div id="play"></div></li>
    <li><div id="forward"></div></li>
  </ul>
</div> 

The CSS, it's simple, too!

ul { margin:0px; }
ul.horizontal_list li { display:inline; list-style:none; float:left; }

#back { background:url("images/back.png") no-repeat 0 0; display:block; width:49px; height:51px; }
#back:active { background:url("images/back.png") no-repeat 0 -51px; }

#stop { background:url("images/stop.png") no-repeat 0 -102px; display:block; width:52px; height:51px; }
#stop:hover { background:url("images/stop.png") no-repeat 0 -51px; }
#stop:active { background:url("images/stop.png") no-repeat 0 0; }

#play { background:url("images/play.png") no-repeat 0 0; display:block; width:49px; height:51px; }
#play:hover { background:url("images/play.png") no-repeat 0 -51px; }
#play:active { background:url("images/play.png") no-repeat 0 -102px; }

#forward { background:url("images/forward.png") no-repeat 0 0; display:block; width:48px; height:51px; }
#forward:active { background:url("images/forward.png") no-repeat 0 -51px; }

Here is where we use image ID's, for the simple reason that each button has a different image and that this will only be displayed once on the page, if we needed multiple instances on the page, it would be a user control (*.ascx instead of being local to the page). Also, compare how the [Stop] button is different from the [Play] button, the third segment of the image vs the first.

The height of the buttons are in this case 51px, and to represent each state (css tag {background: image-url repeat x-axis y-axis;} the y-axis is represented as a multiple of this 51px, measured from the top-down (0px as the base, and this why the values are: 0px, -51px and -102px)).

the Vertical Layout: Images with Text

Now we'll play with this one, it's quite handy if you want to present a menu. Here we use the same image over and over, and it can be used vertically or horizontally. The image has a border on all four sides, so to represent it in a vertical menu we'll shave-off the bottom border using css (setting the height to 20px instead of 21px). And since the image is used repeatably, this is the case for using a class instead of the ID's in the css.

Vertical Button List

The image we are playing with is:

Button States

The Html markup, is simple too! Again we set the unordered-list tag with a class [vertical_list], because we may want to use more than one vertical list on the page and we use a wrapper and set the class to [vButtonWrapper].

<div class="vButtonWrapper">
  <ul class="vertical_list">
    <li><div>Home</div></li>
    <li><div>Products</div></li>
    <li><div>About Us</div></li>
    <li><div>Support</div></li>
  </ul>
</div> 

The CSS is very similar to the horizontal list, but:

• Can you determine what makes this a vertical list?
• How would you make this a horizontal list?

Well, what makes it vertical is that the wrapper is set to the same width as the list-items and we did not use [float:left] attribute. In order to make this a horizontal list add [float:left;] to the [ul.vertical_list li] and change the [width:126px] of [.vButtonWrapper] to at least a multiple of a 126px, say greater than 504px (this would place all four items horizontally).

body { font:arial; font-size:11px; font-family:Arial, Helvetica, sans-serif;}
ul.vertical_list li { text-align: left; margin-left:0; list-style:none; }

.vButtonWrapper { clear:both; width:126px; font-weight:bold; line-height:20px; }
div.vButtonWrapper div 
{ 
  background :url("images/126x21.gif") no-repeat 0 0; display:block;
  width:126px; 
  height:20px; 
  text-align:center;
}
div.vButtonWrapper div:hover { background: url("images/126x21.gif") no-repeat 0 -21px; }

Now, we're done! Wasn't that easy! Button On... folks!

Small Bonus: Within the Project Download, we include an Apple-like [Submit] button for you to play with. Even though the image is rectangular the graphic has rounded edges. You handle it in the same manner discussed above, but note it is on a transparent background so that the page background will show through and around the rounded edges. Images like this one are gif or png images... have fun!

Download Project: WebPepperButton.zip (46.59 kb)

Hope this helps!

the WebPepper team