Button Designs Using Cascading Style Sheets- Page 4

Dated: 28 June, 2007
Author: Jason Gonzalez

In this final style, we will expand on the last design to create an indented button that shows up only on mouseover.

#example4vert {
font-family : "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : left;
}

#example4vert ul {
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;
}

#example4vert ul li {
color : black;
}

#example4vert ul li a:link, #example4vert ul li a:visited {
padding : 3px;
display : block;
color : #006633;
text-decoration : none;
}

#example4vert ul li a:hover, #example4vert ul li a:active {
color : #CC3300;
border : 2px inset #FFFFFF;
text-decoration : underline;
}

Internet Explorer fix provided by 456Bereastreet.com.


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

#example4hor {
font-family : "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : left;
}

#example4hor ul {
width : 576px;
list-style-type : none;
}

#example4hor ul li {
display : inline;
color : black;
}

#example4hor ul li a:link, #example4hor ul li a:visited {
padding : 3px;
color : #006633;
text-decoration : none;
}

#example4hor ul li a:hover, #example4hor ul li a:active {
color : #CC3300;
border : 2px inset #FFFFFF;
text-decoration : underline;
}

Notice how there isn't any information in the code above about the background color. That is because this style can be placed against any background. The only thing you would have to do is change the link colors to complement your webpage.

You may have noticed that when you mouse over a link in the buttons, the link and the page jumps. Unfortunately, I can't figure out a fix for this. (I suspect that the border is adding space around the link).

I chose to use white (#FFFFFF) as the border color, further emphasizing that you can use any background color. However, after creation, you may want to tweak (or not) as you see fit. Then, test in as many browsers and on as many platforms as possible.

Previous Page Home

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