Jul
30
2008
Push - Button menu use no image PDF Print E-mail
hariesdesign.com-push button menu HariesDesign.com This CSS using no images, an awful lot can be done with a style sheet and some basic markup alone. An example is creating real, working pushbuttons out of ordinary links — listed or standing alone, even within the content if margin or word-spacing and a suitable line-height is given.
Example : Click Here
 
 
 
 
 
 

 

 

HTML ( Placed after <BODY> )

<ul class="cpl">
      <li><a href="http://www.hariesdesign.com/new/#">Content 1 </a></li>
      <li><a id="cpl-on" href="http://www.hariesdesign.com/new/#">Content 2</a></li>
      <li><a href="http://www.hariesdesign.com/new/#">Content 3</a></li>

      <li><a href="http://www.hariesdesign.com/new/#">Content 4</a></li>
      <li><a href="http://www.hariesdesign.com/new/#">Content 5</a></li>
      <li><a href="http://www.hariesdesign.com/new/#">Content 6</a></li>
      <li><a href="http://www.hariesdesign.com/new/#">Content 7</a></li>
      <li><a href="http://www.hariesdesign.com/new/#">Content 8</a></li>
      <li><a href="http://www.hariesdesign.com/new/#">Content 9</a></li>

</ul>


 CSS ( Placed before </HEAD> )

<style>
ul.cpl {
  margin : auto;
  width : 200px;
  list-style-type : none;
  text-align : center;
}


/* to center the list, except IE6 */

ul.cpl li {
  margin-left : -25px;
}

/* re-center text in IE6 */

* html ul.cpl li {
  margin-left : 0;
}

h2 {
 text-align : center;
 color : #444;
 margin-left : -25px;
 padding-bottom : 10px;
 font-weight : normal;
}

* html h2 {
 margin-left : 0;
}

/* actual experiment styles */

ul.cpl a {
  width : 200px;
  height : auto;
  display : block;
  border : 2px outset #0066cc;
  text-decoration : none;
  background-color : #0066cc;
  color : #eee;
  font-weight : bold;
  padding : 3px 10px;
  outline : 0;
  cursor : pointer;
}

ul.cpl a:hover, ul.cpl a:focus {
  border : 2px outset #7EBAF6;
  background-color : #7EBAF6;
  color : #fff;
}
/* Powered by : www.hariesdesign.com */
ul.cpl a:active {
  border : 2px inset #27470e;
  background-color : #27470e;
  color : #999;
  padding : 2px 11px 4px 9px;
}

ul.cpl a#cpl-on, ul.cpl a#cpl-on:hover, ul.cpl a#cpl-on:focus, ul.cpl a#cpl-on:active {
  border : 2px outset  #27470e;
  background-color : #11375D;
  color : #ffee00;
  cursor : default;
  text-transform : uppercase;
  padding : 3px 10px;
}

</style>

 

 
 
< Prev   Next >
[ Back ]

 

 

 

Gallery Photography

Must Read

Related Links

Tips and Trick
Pro Directory
Great List Directory

Login

Traffic



Msn bot last visit powered by MyPagerank.Net
Yahoo bot last visit powered by MyPagerank.Net
View blog reactions