Tra gli elementi essenziali per le pagine web ci sono sicuramente i link e i pulsanti: permettono di spostarsi da una pagina ad un'altra, oppure collegano l'utente ad un altro sito web. Con CSS, è possibile dare uno stile a link e pulsanti.
I link (gli elementi <a>
, che puoi trovare nella lezione dei link e collegamenti HTML) possono essere modificati utilizzando CSS in diversi modi, dando uno stile più accattivante.
Lo stile standard dei link è questo (può variare a seconda del browser):
Con CSS, è possibile dare lo stile ai link, ad esempio:
Link di esempio Link di esempio
(passa sopra con il mouse, o fai click, per vedere gli effetti).
Gli stili base dei link sono quelli che abbiamo visto nelle lezioni precedenti: il colore (color
), il colore di sfondo (background-color
), il font del testo (font-family
), le decorazioni del testo (text-decoration
), e così via.
Ad esempio, creiamo un link che non abbia la sottolineatura e sia di blu scuro:
<a href="biadets.com">Impara con Biadets</a>
<style>
a {
color: darkblue;
text-decoration: none;
}
</style>
Ora che abbiamo visto come dare lo stile ad un link, accenniamo alle pseudo-classi (che vedremo nella lezione sulle pseudo-classi più avanti). Le pseudo-classi indicano lo stato in cui si trova il link. Ad esempio, quando il mouse ci passa sopra. Ecco quelli che interessano ai link:
:link
, indica un link che ha una destinazione, che ancora non è mai stato cliccato.:visited
, indica un link che è stato cliccato (e si trova nella cronologia del browser).:hover
, indica un link in cui passa sopra il mouse dell'utente.:focus
, indica un link focus (ad esempio, quando evidenziato con il Tab dall'utente).:active
, indica un link attivato (ad esempio, nel momento in cui lo clicchi).Ad esempio, creiamo un link dove il bordo si colora di rosso quando il mouse ci va sopra:
<a href="biadets.com">Impara con Biadets</a>
<style>
a {
border: 1px solid transparent;
}
a:hover {
border-color: red;
}
</style>
Le pseudo-classi devono essere unite (senza spazi) al selettore (ovvero il tag, la classe, l'ID, ecc.). Ad esempio, a:hover
, .classe:hover
, #id:hover
, ecc.
Possiamo anche aggiungere tutte le pseudo-classi ad un singolo link:
a {
border: 1px solid transparent;
}
a:visited {
color: red;
}
a:focus {
border-color: blue;
}
a:hover {
border-color: red;
}
a:active {
color: red;
}
In questo esempio, sono inserite le pseudo-classi in ordine di importanza. Per questo motivo, è sempre importante scriverle in quest'ordine.
Nota: per far sì che le proprietà siano effettive, :hover
deve essere posizionato dopo :link
(o il semplice selettore come a
) e :visited
, mentre :active
deve essere posizionato dopo :hover
.
I link tramite CSS possono essere stilizzati sottoforma di pulsanti. Ad esempio:
Pulsante di esempioVediamo come creare questo pulsante:
a {
border: 2px solid darkgreen;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-size: 18px;
color: darkgreen;
border-radius: 5px;
}
a:hover {
background-color: darkgreen;
color: white;
}
Nell'esempio, abbiamo utilizzato anche il padding, diversi stili del testo (come font-size
) e l'allineamento del testo al centro con text-align
.
Ai pulsanti, che sono scritti generalmente con i tag <button>
o <input
type="button">
(che puoi trovare nella lezione HTML degli input), possiamo attribuire stili CSS per renderli più belli da vedere.
Possiamo utilizzare tutti gli stili che abbiamo usato per i link sottoforma di pulsanti. Ecco un esempio per un <button>
:
button {
background-color: blue;
color: white;
padding: 10px 20px;
border: 1px solid blue;
border-radius: 5px;
}
button:hover {
color: darkblue;
background-color: white;
}
Con i pulsanti, non essendo link, non esistono le pseudo-classi :link
e :visited
.
Possiamo arrotondare gli angoli dei pulsanti a nostro piacimento attraverso border-radius
:
Per arrotondare gli angoli, usiamo border-radius
(che abbiamo visto nella lezione dei bordi) che accetta sia unità di misura CSS tradizionali, come i px, sia le percentuali.
button {
border-radius: 20px;
}
Possiamo anche aggiungere le ombre ai pulsanti attraverso la proprietà CSS box-shadow
, che abbiamo visto nella lezione delle ombre degli elementi.
Per fare ciò, basta utilizzare la proprietà box-shadow
:
button {
border-radius: 10px;
box-shadow: -2px 3px 15px 0px rgba(192, 192, 192, 0.5);
border: 1px solid lightgrey;
}
Puoi anche fare in modo che l'ombra appaia soltanto quando il mouse va sopra il pulsante, con :hover
:
button {
border-radius: 10px;
border: 1px solid lightgrey;
}
button:hover {
box-shadow: -2px 3px 15px 0px rgba(192, 192, 192, 0.5);
}
Esistono diversi tipi di cursori. Ad esempio, esiste oppure . Puoi scegliere quale tipologia di cursore visualizzare quando ti trovi sopra un link o pulsante.
Per provare, prova a passare il mouse sopra questi pulsanti:
Per fare ciò, utilizziamo la proprietà cursor
. Ecco alcuni dei valori accettati:
auto
, il cursore ha l'icona in base all'elemento.default
, il cursore predefinito (la freccia).none
, nessun cursore viene visualizzato.pointer
, cursore a forma di mano, comunemente usato per link.crosshair
, cursore a forma di croce.text
, cursore a forma di I, utilizzato per testi selezionabili.wait
, cursore a forma di orologio o clessidra, indica che l'applicazione è occupata.help
, cursore a forma di punto interrogativo, per suggerimenti o aiuto.progress
, cursore a forma di rotella o clessidra con puntatore, indica che un'operazione è in corso ma che l'utente può comunque interagire.not-allowed
, cursore a forma di cerchio barrato, indica un'azione non permessa.col-resize
, cursore a forma di doppia freccia orizzontale, per il ridimensionamento delle colonne.row-resize
, cursore a forma di doppia freccia verticale, per il ridimensionamento delle righe.zoom-in
, cursore a forma di lente di ingrandimento con il simbolo di "più", per indicare lo zoom in.zoom-out
, cursore a forma di lente di ingrandimento con il simbolo di "meno", per indicare lo zoom out.Nota: puoi trovare tutti i tipi di cursore nella pagina dei cursori CSS.
.elemento {
cursor: pointer;
}