Button Designs Using Cascading Style Sheets

Dated: 28 June, 2007
Author: Jason Gonzalez

You are here: jgpws.com/Tutorials/CSS/css_buttondesigns1.html

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.

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;
}

Here 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;
}

For the rest of the tutorial, we will go to the next page.
Go back to the Tutorials main page.