Attenzione! Occorre sempre ricordare che un documento web, quando privato del suo foglio di stile, deve rimanere comprensibile, integro e fruibile.
Ecco che, per prima cosa, dobbiamo realizzare una struttura di markup che descriva a sufficienza il link; ad esempio:
codice:
<a id="regolamento" href="sito.it/regolamento-studenti/">
Regolamento studenti
</a>
Una volta fatto ciò, possiamo passare al CSS. Basterà nascondere il testo, dare delle dimensioni fisse al pulsante ed applicarvi un'immagine di sfondo:
codice:
#regolamento
{
/* Diamo una dimensione al pulsante */
display:block;
width:100px; height:30px;
/* Nascondiamo il testo ed eliminiamo la sottolineatura */
text-indent:-1000em; text-decoration:none;
/* Applichiamo lo sfondo, posizionandolo al centro del rettangolo */
background:url('regolamento.gif') no-repeat 50% 50%;
}
In questo modo, se disattiviamo il foglio di stile, o più in generale il documento è visitato da un utente di screen-reader (lettore di schermo per persone non vedenti), lo stile scompare, ma si capisce di cosa tratti il link perchè abbiamo il testo.