Gör länkar tydligare med knappar

Konvertering - tex när en besökare på din webbplats blir en kund, är ett av de viktigaste målen med din hemsida. En av delarna som kan få dig att lyckas med det, är tydliga Call to action (CTA). Du kan förbättra vissa viktiga länkar genom att göra dem som tydliga, lättklickade knappar.

Den här guiden gäller enbart dig som har en responsiv design med Bootstrap.


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


Denna artikel har visats 3566 gånger.

Förbättra din närvaro på nätet
Ja tack, jag vill gärna få nyheter, tips och bra erbjudanden direkt till min e-postadress.

Anmäl dig till vårt nyhetsbrev
Vi skickar ut cirka 10 nyhetsbrev per år