Stile Link in CSS

I collegamenti possono essere stilizzati con qualsiasi proprietà CSS (ad esempio: colore, font-family, sfondo, ecc.).

a {
  color: hotpink;
}

Inoltre, i collegamenti possono essere stilizzati in modo diverso a seconda dello stato in cui si trovano.

I quattro stati dei collegamenti sono:

• a:link - un collegamento normale e non visitato
• a:visited - un collegamento che l’utente ha visitato
• a:hover - un collegamento quando l’utente ci passa sopra col mouse
• a:active - un collegamento nel momento in cui viene cliccato

/* collegamento non visitato */
a:link {
  color: red;
}

/* collegamento visitato */
a:visited {
  color: green;
}

/* passaggio del mouse sul collegamento */
a:hover {
  color: hotpink;
}

/* collegamento selezionato */
a:active {
  color: blue;
}

Quando si imposta lo stile per diversi stati dei collegamenti, ci sono alcune regole sull’ordine:

• a:hover DEVE venire dopo a:link e a:visited
• a:active DEVE venire dopo a:hover

Decorazione del Testo

La proprietà text-decoration viene principalmente utilizzata per rimuovere le sottolineature dai collegamenti:

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Colore di Sfondo

La proprietà background-color può essere utilizzata per specificare un colore di sfondo per i collegamenti:

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

Link come Bottone

Questo esempio dimostra un esempio più avanzato in cui combiniamo diverse proprietà CSS per visualizzare i link come pulsanti:

a:link,
a:visited {
  display: inline-block;
  background-color: #212121;
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 10px 20px;
  border-radius: 10px;
}

a:hover,
a:active {
  background-color: green;
}