Hvordan lager jeg en lenke som ser ut som en knapp (html)

Hvis du trenger en lenke i produktbeskrivelsen, bloggartikkelen eller lignende, kan du få den til å se ut som en knapp.

For å gjøre dette må du kopiere koden nedenfor og lime den inn i html-redigeringsprogrammet der du vil at knappen skal være.

Rediger farger og url etter 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:

For å enkelt finne stedet i html-koden der du vil legge til knappen, skriver du "ADD CODE HERE" i wysiwyg-redigeringsprogrammet, på det stedet du vil at knappen skal være. Åpne html-redigeringsprogrammet, så er det lett å finne det når du blar gjennom html-koden. Deretter erstatter du bare "ADD CODE HERE" med knappekoden.

I eksempelet har vi brukt en emoji foran lenketeksten for å legge til en konvolutt.

Du kan koble knappen til kontaktsiden din, et produkt, en bloggartikkel ... hva du vil.