CSS Web Button - Horizontal Menu

With a little imagination, you can create your own web buttons using CSS style. You can design the font style, borders, background color, size on the button.

In the following code is an example of horizontal menu in XHTML. Changes when the mouse hovers over the button, and the button will revert to the original style when the mouse out. You can design your favorite web buttons, and create a variety of styles you can imagine.

Resources:

CSS Code

<style type="text/css">

body{
  margin:0 auto;
  width:550px;
}

/* normal button layout */
.button{
  border: 2px inset #FF3399;
  padding: 3px 15px;
  width: 100px;
  color: #FFCCFF;
  background-color: #FFCCCC;
  font-family: "Times New Roman", Times, serif;
  font-size: medium;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

/* button text color */
a.button{
  color: #0000CC;
}

/* visited button color  */
a.button:visited{
  color: #666600;
}

/* button layout when mouse hover on it */
a.button:hover{
  background-color: #FF66CC;
  color: #0000CC;
  border: 2px outset #FFCC66;
}


</style>

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
<style type="text/css">

body{
  margin:0 auto;
  width:550px;
}

/* normal button layout */
.button{
  border: 2px inset #FF3399;
  padding: 3px 15px;
  width: 100px;
  color: #FFCCFF;
  background-color: #FFCCCC;
  font-family: "Times New Roman", Times, serif;
  font-size: medium;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

/* button text color */
a.button{
  color: #0000CC;
}

/* visited button color  */
a.button:visited{
  color: #666600;
}

/* button layout when mouse hover on it */
a.button:hover{
  background-color: #FF66CC;
  color: #0000CC;
  border: 2px outset #FFCC66;
}


</style>
</head>

<body>
  <div>

<a class="button" href="home.htm">Home</a>
<a class="button" href="products.htm">Products</a>
<a class="button" href="services.htm">Services</a>
<a class="button" href="about.htm">About Us</a>
<a class="button" href="contact.htm">Contact</a>

  </div>
</body>
</html>

Webmaster » XHTML CSS » You are here

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

CSS Website Layout