Menu Buttons

The origional code for this can be found at Solar Dream Studios. There are a few variations around using the same idea but this one sort of keeps the code reasonably small. All of the menus use a simple piece of code which can be found in the head section of this page, copy everything between <style></style> for the menu number you want to use.

HTML

The html is a basic unordered list with a menu number being used as the id selector <ul id="menu1"><li></li></ul>

Example:

<ul id="menu1">
<li><a href="#">Your Link</a></li>
</ul>

CSS

This part tells the browser to move the background image up 24 pixels when a link is moused over background-position: 0 -24px; This size alters in relation to the size of the image used, for example the image used here is 135 x 48 divided by 2 = 24.

Image of sample menu This is one of the images that is used below. You can use what ever colour text or font by simply making changes in the style.

This part positions the text on the button. font: normal 12px/22px Arial, Helvetica, sans-serif;

To save, right click on the image and 'save picture as' or 'save image' to a folder on your local drive.

Menu 1

 menu image 1

Menu 2

 menu image 2

Menu 3

menu image 3

CSS

#menu,#menu li {
margin: 0 auto;
padding: 0;
list-style: none;
text-align: left;
}

#menu a {
margin-bottom:.8em;
width: 135px;
height: 24px;
background: url(your image.gif) no-repeat;
color: #993366;
display: block;
font: normal 12px/22px Helvetica, Arial, sans-serif;
text-decoration: none;
text-indent: 35px;
}

#menu a:hover {
background-position: 0 -24px;
color: #000;
text-decoration: none;
}

HTML

<ul id="menu">
<li><a href="#">Your Link</a></li>
</ul>