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.

...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;
}

Previous Page Home Next Page

JGPWS's Tutorials can be found at the following locations:

JGPWS Tutorials uses ads on some pages. For more information, see our Privacy Policy page.

[List of marks used, with 'Adobe' first, if used, followed by other Adobe marks used, in alphabetical order] are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Back to: JGPWS index page