Date Originally Written: 28 June, 2007
Rewritten: April 29, 2009
Author: Jason Gonzalez

We’ve all seen them on almost every website– those stylish rollover and button designs made with CSS. Some only have links that change colors when you roll the mouse over them, some have fancy borders, others change the enclosing box’s colors. The best thing about these is that you can create snazzy navigation menus and links lists without having to purchase expensive digital imaging software. Today, I will show various button designs along with the code for them.

*This tutorial assumes that you know how to create an embedded or external style sheet. Also, of important mention here is how to apply the style information to the unordered list. You would simply place a <div> tag around the list and apply an id tag as shown below:

<div id="example1">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
...
</ul>
</div>

This first example shows a simple links list with styled text that changes color during the hover state. It has a simple black border. Click the picture to go to a real example.

wp_screen07

Here is the code for “example 1 vertical”:

#example1vert {
font-family : "Times New Roman", serif;
font-size : 10px;
}

#example1vert ul {
background-color : white;
width : 96px;
list-style-type : none;
border : 1px solid black;
padding : 0;
margin : 0;
}

#example1vert ul li {
border-bottom : 1px solid black;
}

#example1vert ul li a:visited {
color : purple;
}

#example1vert ul li a:link {
color : blue;
}

#example1vert ul li a:hover {
color : red;
}

wp_screen08

To see the real example, click the image and scroll down to the horizontal buttons on the corresponding page. Below is the code for “example 1 horizontal”:

#example1hor {
font-family : "Times New Roman", serif;
font-size : 10px;
text-align : center;
}

#example1hor ul {
background-color : white;
list-style-type : none;
padding : 0;
margin : 0;
width : 384px;
}

#example1hor ul li {
display : inline;
}

#example1hor ul li a {
margin-left : 0;
margin-right : 0;
border : 1px solid black;
}

#example1hor ul li a:visited {
color : purple;
}

#example1hor ul li a:link {
color : blue;
}

#example1hor ul li a:hover {
color : red;
}

This second example shows a links list whose enclosing box changes color upon mouseover. We will also stylize the font and add a border to the a:hover state. Follow the link from the picture to an actual example.

This information has been updated as of October 15th, 2008 to address gap issues in Internet Explorer 6 (and up) that relate to displaying list items as block. Thankfully, the website 456 Berea St offers a fix for this bug located at this address: 456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/. The new information will be commented after the code information.

wp_screen09
And below is the code for this Vertical rollover list:

#example2vert {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
}

#example2vert ul {
background-color : #333366;
width : 118px;
list-style-type : none;
padding : 0;
margin : 0;
}

#example2vert ul li {
color : white;
}

#example2vert ul li a:link, #example2vert ul li a:visited {
color : #9999FF;
text-decoration : none;
padding : 3px;
display : block;
}

#example2vert ul li a:hover {
color : white;
background-color : #6666CC;
border : dashed 1px #9999FF;
}

Internet Explorer designs must use the following bug fix and conditional comment. You can create an embedded style rule in the head tag of your html page:


<!--[if lt IE 8]>
  <style type="text/css">

    #example2vert ul li a {
    display : inline-block;
    }
  </style>
<![endif]-->

And below this paragraph is the Horizontal version of the list and the code.

wp_screen10

#example2hor {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
}

#example2hor ul {
background-color : #333366;
width : 512px;
list-style-type : none;
padding : 3px;
margin : 0;
}

#example2hor ul li {
color : white;
display : inline;
}

#example2hor ul li a:link, #example2hor ul li a:visited {
color : #9999FF;
text-decoration : none;
padding-left : 3px;
padding-right : 3px;
}

#example2hor ul li a:hover {
color : white;
background-color : #6666CC;
border : dashed 1px #9999FF;
}

In this example, our design will focus more on using a border to create an indented button effect. Below is the look and feel for this design.

wp_screen11

…And below is the code:

#example3vert {
font-family : Georgia, "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : left;
}

#example3vert ul {
background-color : #FFFFCC;
width : 96px;
list-style-type : none;
/* Margin and padding must be set to zero or there will be extra space */
/* to the left of the list */
margin-left : 0;
padding-left : 0;
border : 4px ridge #FFCC99;
}

#example3vert ul li {
color : black;
}

#example3vert ul li a {
padding : 3px;
display : block;
color : #006633;
text-decoration : none;
border : 2px outset #FFCC99;
}

#example3vert ul li a:hover {
color : #CC3300;
border : 2px inset #FFCC99;
text-decoration : underline;
}

Internet Explorer fix provided by 456Bereastreet.com.


<!--[if lt IE 8]>
  <style type="text/css">
    #example3vert ul li a {
    display : inline-block;
    }
  </style>
<![endif]-->

And below is the horizontal look with the code afterwards:

wp_screen12

#example3hor {
font-family : Georgia, "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : center;
}

#example3hor ul {
background-color : #FFFFCC;
width : 576px;
padding : 6px;
list-style-type : none;
border : 4px ridge #FFCC99;
}

#example3hor ul li {
display : inline;
color : black;
}

#example3hor ul li a {
padding : 3px;
color : #006633;
text-decoration : none;
border : 2px outset #FFCC99;
}

#example3hor ul li a:hover {
color : #CC3300;
border : 2px inset #FFCC99;
text-decoration : underline;
}

In this final style, we will expand on the last design to create an indented button that shows up only on mouseover.

wp_screen13

#example4vert {
font-family : "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : left;
}

#example4vert ul {
width : 96px;
list-style-type : none;
/* Margin and padding must be set to zero or there will be extra space */
/* to the left of the list */
margin-left : 0;
padding-left : 0;
}

#example4vert ul li {
color : black;
}

#example4vert ul li a {
padding : 3px;
display : block;
color : #006633;
text-decoration : none;
}

#example4vert ul li a:hover {
color : #CC3300;
border : 2px inset #FFFFFF;
text-decoration : underline;
}

Internet Explorer fix provided by 456Bereastreet.com.


<!--[if lt IE 8]>
  <style type="text/css">
    #example4vert ul li a {
    display : inline-block;
    }
  </style>
<![endif]-->

wp_screen14

#example4hor {
font-family : "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : left;
}

#example4hor ul {
width : 576px;
list-style-type : none;
}

#example4hor ul li {
display : inline;
color : black;
}

#example4hor ul li a {
padding : 3px;
color : #006633;
text-decoration : none;
}

#example4hor ul li a:hover {
color : #CC3300;
border : 2px inset #FFFFFF;
text-decoration : underline;
}

Notice how there isn’t any information in the code above about the background color. This means that this style can be placed against any background color. The only thing you would have to change is the link colors to something complementary to your webpage.

You may have noticed that when you mouse over the links, the links and the page jumps. Unfortunately, I can’t figure out a fix for this. (I suspect that the border is adding space around the link).

I chose to use white (#FFFFFF) as the border color, further emphasizing that you can use any background color. However, after creation, you may want to tweak (or not) as you see fit. Then, test in as many browsers and on as many platforms as possible.

Advertisements