Hur gör jag en länk som ser ut som en knapp (html)

Om du behöver en länk i din produktbeskrivning, bloggartikel etc. kan du få den att se ut som en knapp.

För att göra detta måste du kopiera koden nedan och klistra in den i html-redigeraren där du vill att din knapp ska vara.

Ändra färgerna och url:en efter behov.

<style>
a.button {
    color: white; /* text color */
    background-color: black;
    border-radius:10em; /* rounded corners */
    border: 2px solid white;
    margin: 10px 0px;
    padding:12px;
    font-weight: 600;
    overflow-wrap: break-word;
    overflow: hidden;
    text-decoration: none;
}
.button:hover {
    color: black;
    background-color: white;
    border: 2px solid black;
}
     </style>
<p style="text-align: center;">
<a class="button" href="https://YOUR-URL-HERE.com/">BUTTON TEXT HERE</a></p>

💡Tips:

För att enkelt hitta den plats i HTML-koden där du vill lägga till din knapp, skriver du ”LÄGG TILL KOD HÄR” i den vanliga redigeraren, precis där du vill att knappen ska placeras. Öppna HTML-redigeraren så blir det enkelt att hitta rätt ställe när du bläddrar igenom koden. Ersätt sedan bara ”LÄGG TILL KOD HÄR” med knappens kod.

I exemplet har vi använt en emoji framför länktexten för att lägga till ett kuvert.

Du kan länka knappen till din kontaktsida, en produkt, en bloggartikel ... vad du vill.

Olika typer av länkar:

För en webbplats, som i exemplet ovan:  

href="https://your-url-here.com/"

För en e-postadress:

href="mailto:email@address.com"

För ett telefonnummer:

href="tel:+4799999999"