CSS-länk

Med CSS kan du sätta länkens stil på olika sätt.

Textlänk Textlänk Länkknapp Länkknapp

Ställ in länkstil

Länkar kan använda alla CSS-attribut (t.ex. color,font-family,background och liknande) för att sätta stil.

exempel

a {
  color: hotpink;
}

Prova själv

Dessutom kan du sätta olika stilar för länkar beroende på deras status.

Fyra länkstatus är:

  • a:link - Normal, inte besökt länk
  • a:visited - När användaren har besökt länken
  • a:hover - När användaren håller muspekaren över länken
  • a:active - När länken klickas

exempel

/* Inte besökt länk */
a:link {
  color: red;
}
/* Besökt länk */
a:visited {
  color: green;
}
/* Muspekaren över länken */
a:hover {
  color: hotpink;
}
/* Vald länk */
a:active {
  color: blue;
}

Prova själv

Om du sätter stil för flera länkstatus, följ följande ordningsregler:

  • a:hover måste komma efter a:link och a:visited
  • a:active måste komma efter a:hover

Textdekoration

text-decoration Egenskapen används huvudsakligen för att ta bort understrykning från länkar:

exempel

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

Prova själv

Bakgrundsfärg

background-color Egenskaper kan användas för att specificera bakgrundsfärgen för länkar:

exempel

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

Prova själv

Länkknapp

Detta exempel visar en mer avancerad version där vi kombinerar flera CSS-attribut för att visa länkar som rutor/knappar:

exempel

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

Prova själv

Mer exempel

Lägg till olika stilar till hyperlänkar
Detta exempel visar hur man lägger till andra stilar till hyperlänkar.
Avancerat - Skapa kantlindade länknappar
Detta är ett annat exempel på hur man skapar en länkram / knapp.
Ändra cursor
cursor egenskapen specificerar den cursor-type som ska visas. Detta exempel visar olika cursor-types (nyttigt för länkar).