Using Image to create a Button : CSS Button « CSS Controls « HTML / CSS

HTML / CSS » CSS Controls » CSS Button 
Using Image to create a Button
  
<!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" dir="ltr" lang="en-US"
  xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style rel="stylesheet" type="text/css">

#menu ul {
  display: block;
  float: left;
  width: 550px;
  overflow: hidden;
}

#menu li {
  width: 110px;
  padding: 0 0 2px 0;
  float: left;
  list-style-type: none;
  font-family: Tahoma;
  font-size: 11px;
  background-image: url(image-demo-2011/but.gif);
  background-position: top left;
  background-repeat: no-repeat
}

#menu li a {
  width: 110px;
  display: block;
  float: left;
  text-align: center;
  line-height: 31px;
  color: #616365;
  text-decoration: none
}

#menu #active {
  background-image: url(image-demo-2011/but_a.gif);
  background-position: -1px 0
}

#menu #active a {
  color: #FFFFFF
}

#submenu {
  background-image: url(image-demo-2011/subbg.gif);
  background-position: top left;
  background-repeat: repeat-x;
  height: 29px;
  width: 100%;
  float: left
}

#submenu .first {
  padding: 11px 0 0 261px
}

#submenu .second {
  padding: 11px 0 0 371px
}

#submenu a {
  display: block;
  float: left;
  font-family: Tahoma;
  font-size: 11px;
  color: red;
  text-decoration: none;
  background-image: url(image-demo-2011/bullet.gif);
  background-position: top left;
  background-repeat: no-repeat;
  padding: 0 0 0 17px;
  margin: 0 30px 0 0;
  line-height: 10px;
}

#submenu #over,#submenu a:hover {
  background-image: url(image-demo-2011/bullet_a.gif)
}

#submenu li {
  list-style-type: none;
  display: inline;
}


</style>
</head>
<body>
    <div id="menu">
      <ul>
        <li id="active"><a href="index.html">Home</a></li>
        <li><a href="index2.html">Products</a></li>
        <li><a href="index2.html">Services</a></li>
        <li><a href="index2.html">Dealers</a></li>
        <li><a href="#">Forum</a></li>
      </ul>
    </div>
    <div id="submenu">
      <ul class="first">
        <li><a href="#" id="over">Mission</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">News</a></li>
      </ul>
    </div>

</body>

</html>

   
    
  
Related examples in the same category
1.CSS Button with anchor
2.Shading Button
3.Read more and Comments buttons
4.Large Link button
5.Enlargable link button
6.Creating and assigning actions to buttons
7.Button navigation
8.A text button
9.Buttons
10.Buttons with button element
11.CSS Button
12.css rollover button
13.Button like right menu bar with mouse hover effect
14.Make anchor a button
15.Change input form button style
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.