Here is a simple set of buttons using CSS3. Here is a demo of the buttons. Download the zip file here.
And here’s an image of the button set (for unsupported browsers).
I haven’t including any fallback for IE in this one. Pretty easy to do though, using CSS3pie. Check it out.
Here is some sample HTML for the <body> of the page.
<body> <ul id="menu"> <li class="button">Home</li> <li class="button">Portfolio</li> <li class="button">Media</li> <li class="button">About</li> <li class="button">Contact</li> </ul> </body>
And here are the styles. Either link to them in a separate document or place them in the <head>.
.button {
width: 100px;
height: 20px;
line-height: 20px;
text-align: center;
text-decoration: none;
cursor: pointer;
margin-bottom: 2px; /* only necessary when buttons are vertically above one another */
/* display: inline; for horizontal buttons */
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
/* text-shadow: rgba(0,0,0,.4) 0 1px 0; */
color: white;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}
li {
list-style-type: none;
}