Buttons can simply be text links, and unless you have a million links on your web, it is a good idea to give those links a decent look to emphasize on their importance. Cascading Style Sheet, or CSS, is a set of style-rules that makes the functional part of a website look pretty. Without the use of images, Javascript, or even Flash, CSS can transform a lonely text link into a vibrant and dynamic button.

From Links to Buttons to Menus: (mouse-over for effects)

Source Code:
Insert the following code into the HEAD section of your HTML document.

<style type="text/css">
/****************** CSS code for Buttons Set 2 ******************/
 
/* DIV container to hold buttons, and set container properties */
#button_holder2 {
	display:block;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#CCC; 
}
/* Button properties in still mode */	
.btn2 a {
	padding:0 20px;
	float:left; 
	text-decoration:none;
	color: #069;
	font-weight:bold;
	border:1px solid #09C;
}
/* Button properties in dynamic mode (mouse-over) */
.btn2 a:hover {
	color:#fff;
	background-color:#09C;
}
 
</style>

Now place the below code, wherever you want your menu to appear, into the BODY section of your HTML document.

<!-- Buttons set 2 -->
<div id="button_holder2" class="btn2">
    <a href="#">This</a>
    <a href="#">Looks</a>
    <a href="#">Even</a>
    <a href="#">Prettier</a>
</div>

Download full HTML source – contains all 3 menu sets

That was simple, wasn’t it? A functional and elegant web menu without the timeconsuming Flash, Javascript, or Photoshop. Just remember to replace the “#” with links of your choice. The CSS code itself is self-explanatory (see commentary for details)

1. Ego
   December 30, 2008, 22:50
   1

   really nice thx

   Reply

2. The Chatty Girl
   December 31, 2008, 10:32
   2

   Thanks for the very helpful tutorial! I will definitely reference this.

   Reply

3. Make simple buttons and menus using CSS in 5 minutes | Teknocalypse | CSS Tutorials - CSSHelper.net
   March 19, 2009, 11:51
   3

   [...] Source [...]

4. Anas
   April 16, 2009, 16:32
   4

   Do you know something?

   it’s realy simple and very very usefull, I’m useing it on my project :)

   Reply

Post a comment

Name *

E-mail * - can optionally be tied to your "Gravatar.com" registered avatar

Web site

Comment

Please enter the security code below, as it appears, before submitting your comment.

CAPTCHA Code