Länkknapp i CSS

Hur du på bästa sätt skapar en länkknapp i CSS.

En bra knapp vill man trycka på - det spelar ingen roll vart den går någonstans, du vill bara trycka på den. Det är ditt jobb att få användaren att trycka på dom knappar som du vill att användaren ska trycka på, därför är det viktigt att göra dom attraktiva.

Styla länken, inte elementet utanför

Det finns två sätt att gå tillväga, bara ett är rätt. Antingen lägger man länken i ett html-element och stylar html-elementet, eller så struntar man i elementet och stylar länken direkt. Varför man bör styla länken direkt och inte html-elementet beror på att hela länken ska vara tryckbar och aktiv. Med ett element utanpå förlorar du länkbart område och det blir svårare att styla.

<span class="button"><a href="#">Fel sätt</a></span>

<a href="#" class="button">Rätt sätt</a>
.button {
  background: #2eabd9;
  padding: 10px 18px;
  color: #fff;
}

Dela upp det i flera knappar

Vanligtvis brukar man ha ett flertal olika knappar där varje knapp spelar en roll, en knapp kan varna besökaren för något och en annan kan berätta för användaren att den har lyckats och är världens bästa människa. Alla knappar har varsin pedagogiska färg. Hur delar man då upp detta på ett effektivt sätt? Bäst är det att återanvända css som finns i alla knappar gemensamt. Det betyder att vi kommer att ha en grund-class till alla knappar, och därefter en child-class där vi bestämmer färg.

<a href="#" class="button primary">Primär knapp</a>
<a href="#" class="button success">Du är bäst!</a>
<a href="#" class="button warning">Vill du verkligen trycka?</a>
<a href="#" class="button danger">Här vill du inte trycka</a>
.button {}

.button.primary {}

.button.success {}

.button.warning {}

.button.danger {}

Grunden på knappen

De tre attributet som vi kommer att applicera är padding, color, border-radius och display.

Det som jag tycker blir snyggast estetiskt sätt är när sidorna på knappen minst är bredare än topp och botten, den känns stabilare och mer tryckvänligt.

.button {
  padding: 10px 18px;
}

Därefter gör vi knapptexten vit.

.button {
  padding: 10px 18px;
  color: #fff;
}

Med hjälp av border-radius kan vi göra kanterna runda på knappen. 3px eller 5px brukar bli perfekt om det gäller mindre knappar. Eftersom alla webbläsare envisas med att ha en egen standard så behöver vi skriva ut border-radius på tre olika variablar.

.button {
  padding: 10px 18px;
  color: #fff;
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
}

Till sist ska vi applicera display: inline-block för att knappen ska lägga sig mer som ett block istället för en text.

.button {
  padding: 10px 18px;
  color: #fff;
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  display: inline-block;
}

Färgsätt alla knappar

Nu när vi har grunden klar kan vi färgsätta alla knappar med hjälp av background.

.button.primary {
  background: #2eabd9;
}

.button.success {
  background: #38ac39;
}

.button.warning {
  background: #bf8520;
}

.button.danger {
  background: #ba2a2d;
}

Hover

Vilken färg ska knapparna få när man tar musen över? Det bestämmer vi med hjälp av hover.

.button.primary {
  background: #2eabd9;
}
  .button.primary:hover {
    background: #1987b0;
  }

.button.success {
  background: #38ac39;
}
  .button.success:hover {
    background: #297f22;
  }

.button.warning {
  background: #bf8520;
}
  .button.warning:hover {
    background: #a8720e;
  }

.button.danger {
  background: #ba2a2d;
}
  .button.danger:hover {
    background: #a42322;
  }

Vi vill dessutom inte ha någon underline på länktexten, så vi skriver text-decoration: none.button.

.button {
  padding: 10px 18px;
  color: #fff;
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  text-decoration: none;
}
  .button:hover {
  	text-decoration: none;
  }

Resultat

Primär knapp Du är bäst! Vill du verkligen trycka? Här vill du inte trycka

<a href="#" class="button primary">Primär knapp</a>
<a href="#" class="button success">Du är bäst!</a>
<a href="#" class="button warning">Vill du verkligen trycka?</a>
<a href="#" class="button danger">Här vill du inte trycka</a>
.button {
  padding: 10px 18px;
  color: #fff;
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  text-decoration: none;
  display: inline-block;
}
  .button:hover {
  	text-decoration: none;
  }


.button.primary {
  background: #2eabd9;
}
  .button.primary:hover {
    background: #1987b0;
  }

.button.success {
  background: #38ac39;
}
  .button.success:hover {
    background: #297f22;
  }

.button.warning {
  background: #bf8520;
}
  .button.warning:hover {
    background: #a8720e;
  }

.button.danger {
  background: #ba2a2d;
}
  .button.danger:hover {
    background: #a42322;
  }

Vill du bidra till ett öppnare och friare läromedel?

Bidra med eget material
comments powered by Disqus