logo logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

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:

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

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

Pulsante di 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:

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

Prova!Completa gli spazi vuoti con il testo appropriato.
/* Il link deve essere verde al passaggio del mouse sopra */
a:{
  : green;
}

Prova!Scegli l'opzione corretta tra quelle elencate.
/* Imposta il cursore a forma di mano sopra il pulsante */
cursor: __________;