Creating CSS Buttons

xiaoxiao2021-03-06  43

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