Button Designs Using Cascading Style Sheets- Page 3
Dated: 28 June, 2007
Author: Jason Gonzalez
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.
- Vertical
- Link One
- Link Two
- Link Three
- Link Four
- Link Five
...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:
- Horizontal
- Link One
- Link Two
- Link Three
- Link Four
- Link Five
#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; }