Linkuri sub forma de buton doar din CSS

[Dennis]

Definitia CSS livreaza mai multe asanumite clase pseudo (pseudo-classes)

Foloseste urmatorul format:

selector:pseudo-class {property: value}

Linkurile detin urmatoarele patru pseudoclase:

link
visited
hover
active


Singura pseudoclasa care poate mai are nevoi de explicatii suplimentare, este 'active'. Aceasta se refera la procesul cand un link detine proprietatea de a efectua pe acesta un click.
Prin unele proprietati in setari, cum ar fi fundal, distanta sau rama poti transforma aceste linkuri in butoane, butoane controlate in exclusivitate prin Cascading Style Sheet (CSS)

In acet caz, codul ar arata asa:


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: #eeeeee;
}

a:active
{
border-bottom: 1px solid #eeeeee;
border-top: 1px solid black;
border-right: 1px solid #eeeeee;
border-left: 1px solid black;
}



<a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a>


Nota:
pentru clasele a: link si a: visisted au fost inscrise proprietati identice deoarece linkurile-si schimba formatul dupa ce au fost vizitate *visisted*.