Gör länkar tydligare med knappar

Gör en länk till en knapp

Länkar kan bli tydligare och mer klickvänliga om du gör dem som knappar, se exempel nedan.

Läs mer Läs mer

• Börja med att skapa en länk som vanligt.
• Därefter klickar du på knappen HTML i editorn.
• I HTML-taggen <a> lägger du till en klass som i exemplet nedan.

<a class="btn btn-default" href="din länk">Läs mer</a>

Sätt färg på knappen

Det finns en handfull fördefinierade klasser för att sätta olika färger på knappar. Gör som i exemplet ovanför och lägg till den class som du vill använda.

Default Primary Success Info Warning Danger Link

<a class="btn btn-default" href="din länk">Default</a>
<a class="btn btn-primary" href="din länk">Primary</a>
<a class="btn btn-success" href="din länk">Success</a>
<a class="btn btn-info" href="din länk">Info</a>
<a class="btn btn-warning" href="din länk">Warning</a>
<a class="btn btn-danger" href="din länk">Danger</a>
<a class="btn btn-link" href="din länk">Link</a>

Storlek på knappen

Vill du ha en liten eller stor knapp? Använd .btn-lg, btn-sm eller .btn-xs för olika storlekar.

Exempel

Stor knapp Stor knapp

Standard knapp Standard knapp

Liten knapp Liten knapp

Extra liten knapp Extra liten knapp

<p>
  <a class="btn btn-primary btn-lg" href="din länk">Stor knapp</a>
  <a class="btn btn-default btn-lg" href="din länk">Stor knapp</a>
</p>
<p>
  <a class="btn btn-primary" href="din länk">Standard knapp</a>
  <a class="btn btn-default" href="din länk">Standard knapp</a>
</p>
<p>
  <a class="btn btn-primary btn-sm" href="din länk">Liten knapp</a>
  <a class="btn btn-default btn-sm" href="din länk">Liten knapp</a>
</p>
<p>
  <a class="btn btn-primary btn-xs" href="din länk">Extra liten knapp</a>
  <a class="btn btn-default btn-xs" href="din länk">Extra liten knapp</a>
</p>

Behöver du hjälp eller vill du beställa kundspecifika format och klasser? Kontakta oss så hjälper vi dig.

Kontakta oss