This page suggests a solution for making a list of links look like buttons. This is what we are trying to achieve ...

 

1. Create some basic links

This might be the code for 4 links ...

<h6><a href="home.htm">Home</a></h6>
<h6><a href="about.htm">About</a></h6>
<h6><a href="contact.htm">Contact</a></h6>
<h6><a href="shop.htm">Shop</a></h6>

On the page they would normally look like this ...

Home

About

Contact

Shop

NOTE: We have used the <h6> tag because in this simple example it has been reserved for the links in a navigation bar only, and will not be used elsewhere on the site. You could of course use a contextual selector instead.

2. Create styles for the <h6> tag, and the a, and a:hover (link) selectors

These styles style the h6 text links and create boxes around them ...

h6 {
font-size: 12px;
color: #000000;
width: 100px;
margin: 0px;
padding: 0px;
}

a {

display: block;
font-weight: bold;
color: #333333;
text-decoration: none;
background-color: #999999;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 8px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #333333;
border-bottom-color: #333333;
border-left-color: #FFFFFF;
background-image: none;

}
a:hover {
background-color: #CCCCCC;
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #333333;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #333333;
background-image: none;
}

If you've mastered this ...

Try an advanced version in which the links have been placed in an unordered list (ul).

Click here

Related downloads

None at present

Related ads