Creating CSS Buttons
Working Demo:
A.BUT: LINK, A.BUT: VISITED
{
FLOAT: LEFT;
Margin: 2px 5px 2px 5px;
Padding: 2px;
Width: 100px;
Border-top: 1px solid #cccccc;
Border-bottom: 1px solid black;
Border-left: 1px solid #cccccc;
Border-Right: 1PX Solid BLACK;
Background: #cccccc;
TEXT-ALIGN: CENTER;
Text-decoration: none;
FONT: NORMAL 10PX VERDANA;
Color: Black;
}
A.BUT: HOVER
{
Background: #eeeee;
}
A.But: Active
{
Border-bottom: 1px solid #eeeeee;
Border-top: 1px solid black;
Border-Right: 1PX Solid #eeeeee;
Border-left: 1px solid black;
}
Button 1
Button 2
Button 3
The Cascading Style Sheet (CSS) Definition Provides Several So-Called "Pseudo-Classes". These area...........................
The Take the form:
Select All Code Selector: Pseudo-Class {Property: value}
Anchor Tags Have Four Pseudo-Classes:
1) LINK
2) Visited
3) HOVER
4) ACTIVE
The only one tria perhaps Needs Further Explanation is "Active". It refers to a link in the process of being click, but hasten't yet been released.
By Setting The Background, Spacing, and Border Properties of these Pseudo-classes, you can make your hyperlinks Look and behave Like Buttons.
The code is better:
Select All Code
A: Link, A: Visited
{
FLOAT: LEFT;
Margin: 2px 5px 2px 5px;
Padding: 2px;
Width: 100px;
Border-top: 1px solid #cccccc;
Border-bottom: 1px solid black;
Border-left: 1px solid #cccccc;
Border-Right: 1PX Solid BLACK;
Background: #cccccc;
TEXT-ALIGN: CENTER;
Text-decoration: none;
FONT: NORMAL 10PX VERDANA;
Color: Black;
}
A: Hover
{
Background: #eeeee;
}
A: A: Active {
Border-bottom: 1px solid #eeeeee;
Border-top: 1px solid black;
Border-Right: 1PX Solid #eeeeee;
Border-left: 1px solid black;
}
style>
hEAD>
body>
html>
Note: I Defined A: Link and A: Visisted to Share A Style Definition, Because Buttons Don't change Their Appearance..