Creating CSS Buttons
Working Demo:
Button 1 Button 2 Button 3
The Cascading Style Sheet (CSS) definition provides several so-called "pseudo-classes". These are classes that modify all occurences of a given style definition.
They take the form:
|
Anchor tags have four pseudo-classes:
1) link
2) visited
3) hover
4) active
The only one that perhaps needs further explanation is "active". It refers to a link in the process of being clicked. The mouse is "down", but hasn'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 below:
|
Note: I defined a:link and a:visisted to share a style definition, because buttons don't change their appearance when they've been "visisted".