Often a Website owner decides to “dress up” their menu display by using button graphics instead of plain text links. It’s a great idea to give your navigation more punch, but I recommend you avoid going with image files for your buttons and instead choose a simple CSS (Cascading Style Sheets) layout.

Here are my reasons:

Graphic files can increase the time it takes your site to load into a browser.

Search engines cannot read images.

CSS, when used properly, will give you far more control without the need for java script.

Using a little bit of CSS, you can create a very nice menu array that your visitors will think are dynamic image files. When you hover over any part of this kind of CSS menu you can even watch the buttons change color and seem to depress into the page.

Pretty cool huh?

CSS menus require no heavy java script code that could slow your load time. You simply add a short section to your external style sheet to tell a browser how to display the buttons in terms of size, colors, font style, etc. and then reference these specs in the HTML document where the menus reside.

In simplest terms this is a two-step process that takes all of ten minutes to complete.

And search engine spiders will read the anchor links placed in this sort of menu as direct text linkage. What’s more, you can apply the title= attribute to further enhance your onsite SEO.

Here is the code you’ll need to add to your external CSS to fly this sort of menu:

.buttonscontainer {width: 120px;}

.buttons a {color: #;<BR>
border: 1px solid;<BR>
background-color: #;<BR>
padding: 0px;<BR>
padding-left: 0px;<BR>
font: 12px Arial, sans-serif;<BR>
font-weight: bold;<BR>
text-decoration: none;<BR>
border-color: # # # #;<BR>
display: block;<BR>
margin: 3px;<BR>
width: 100%;<BR>
text-align: center;}

.buttons a:hover {border: 1px solid;<BR>
padding-left: 0px;<BR>
padding-top: 0px;<BR>
padding-bottom: 0px;<BR>
padding-right: 0px;<BR>
background-color: #;<BR>
border-color: # # # #;<BR>
color: #;<BR>
text-decoration: none;}

Click Here to see what the above menu codes look like in a browser.

Of course you’ll need to edit the color specs above, in addition to changing any borders, margins, etc. as you see fit.

Open your HTML pages and, exactly where you need to define your slick new menu buttons, open two divs with class=”buttonscontainer” and class=”buttons”, add your button text and anchor, and close both divs.

Play around with this coding in your own design scheme. The sample menus I showed you are really only the beginning of what you can do with this foundation.

For more great tips be sure to check out our complete Web Design Course.

Tags: css buttons, learn css, Learn Web Design, Web Design Course

This entry was posted on Thursday, October 9th, 2008 at 9:38 pm and is filed under Learn Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.