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: rebeccapurple;
    border-radius:10em; /* rounded corners */
    border: 1px solid white;
    margin: 10px 0px;
    padding:12px;
    font-weight: 600;
    word-wrap: wrap;
    overflow: hidden;
    text-decoration:none;
}
.button:hover {
    color: white;
    background-color: indigo;
    border: 1px solid darkorange;
}
     </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, skriv "ADD CODE HERE" i wysiwyg-editorn, på den plats där du vill att din knapp ska vara. Öppna html-redigeraren så blir det lätt att hitta när du bläddrar igenom html-koden. Ersätt sedan bara "ADD CODE HERE" med knappkoden.

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.