CSS allows us to omit images from button rollovers. It also can add effects such as animation and glowing tints to any button. This same effect consumes considerably more time if using images; also loading times are higher. CSS solves this problem.
Here are the buttons we shall create:
We can change the color of the buttons to any choice related to the web site color palette. It’s easy to edit the CSS properties. This way, you can omit the use of gifs and jpegs. Of course, flash can add some real style to the button effects but if you just want a simple menu, CSS is the way to go.
Here is the code:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>CSS Button Animation Without Images</title>
<style>
body {
margin: 0px; /* set the page margin property */
padding: 0px; /* set the padding for the page */
}
div#buttoncss {
margin-left: 40px; /* set the margin left property for the div*/
}
div#buttoncss ul { /* specify unordered list attributes like font,line
height */
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
}
div#buttoncss li { /* specify the property for the list item in the ul
like width,height,margin,list style,etc */
list-style-type: none;
height: 20px;
width: 105px;
margin: 10px;
text-align:center;
}
div#buttoncss li a { /* specify the height,width of the anchor tag
attribute */
height: 100%;
width: 100%;
display: block;
text-decoration: none;
border-width: 5px;
}
div#buttoncss li a:link {
color: #000000;
font-weight: bold;
background-color: #003366; /* anchor tag link bg color specification */
border-style: outset;
/* can change the 3d appearance through this attribute by specifying different inputs like ridge,dashed,dotted,double…*/
}
div#buttoncss li a:visited {
color: #000000; /* set the font color for anchor:visited attribute*/
font-weight: normal;
background-color: #996633; /* set the visited bg color */
border-style: outset; /* anchor tag visited border effects done through this attribute */
}
div#buttoncss li a:hover {
font-weight: bold; /* set mouseover font size */
color: #FFFFFF; /* set mouseover font color */
background-color: #660000; /* Changing the background color on mouse over */
border-style: outset; /* Embossed effects can adjust through this attribute*/
}
div#buttoncss li a:active {
font-weight: bold; /* set the font size */
color: #FFFFFF; /* set the active font color */
background-color: #993300; /* set the active bg color */
border-style: inset; /* On mouseover effects attain through this attribute */
}
</style>
</head>
<body>
<div id="buttoncss">
<ul>
<li><a href="">Option 1</a></li>
<li><a href="">Option 2</a></li>
<li><a href="">Option 3</a></li>
</ul>
</div>
</body>
</html>
If faster loading pages are your main concerns, always consider CSS as the solution to gain crisper code.
