"; ?> Button Designs with CSS

Button Designs Using Cascading Style Sheets- Page 3

Dated: 28 June, 2007
Author: Jason Gonzalez

Valid XHTML 1.0 Transitional

In this example, our design will focus more on using a border to create an indented button effect. Below is the look and feel for this design.

...And below is the code:

#example3vert {
font-family : Georgia, "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : left;
}
#example3vert ul { background-color : #FFFFCC; width : 96px; list-style-type : none; /* Margin and padding must be set to zero or there will be extra space */ /* to the left of the list */ margin-left : 0; padding-left : 0; border : 4px ridge #FFCC99; }
#example3vert ul li { color : black; }
#example3vert ul li a:link, #example3vert ul li a:visited { padding : 3px; display : block; color : #006633; text-decoration : none; border : 2px outset #FFCC99; }
#example3vert ul li a:hover, #example3vert ul li a:active { color : #CC3300; border : 2px inset #FFCC99; text-decoration : underline; }

Internet Explorer fix provided by 456Bereastreet.com.


<!--[if lt IE 8]>
  <style type="text/css">
    #example3vert ul li a {
    display : inline-block;
    }
  </style>
<![endif]-->

And below is the horizontal look with the code afterwards:

#example3hor {
font-family : Georgia, "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : center;
}
#example3hor ul { background-color : #FFFFCC; width : 576px; padding : 6px; list-style-type : none; border : 4px ridge #FFCC99; }
#example3hor ul li { display : inline; color : black; }
#example3hor ul li a:link, #example3hor ul li a:visited { padding : 3px; color : #006633; text-decoration : none; border : 2px outset #FFCC99; }
#example3hor ul li a:hover, #example3hor ul li a:active { color : #CC3300; border : 2px inset #FFCC99; text-decoration : underline; }