Link e pulsanti con CSS

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 con CSS

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

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>

Gli stili con le pseudo-classi

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:

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 sottoforma di pulsanti

I link tramite CSS possono essere stilizzati sottoforma di pulsanti. Ad esempio:

Vediamo 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.

I pulsanti con CSS

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.

I pulsanti rotondi e rettangolari

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;
}

I pulsanti con le ombre

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);
}

I diversi tipi di cursori

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:

Nota: puoi trovare tutti i tipi di cursore nella pagina dei cursori CSS.

.elemento {
  cursor: pointer;
}