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: 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:

For å finne det stedet i HTML-koden hvor du vil legge til knappen, skriver du «ADD CODE HERE» i vanlig redigeringsmodus, akkurat der du ønsker at knappen skal være. Åpne HTML-redigeringsmodus, så blir det enkelt å finne stedet når du blar gjennom HTML-koden. Deretter er det bare å erstatte «ADD CODE HERE» med koden for knappen.

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.

Ulike typer lenker:

For en nettside, som i eksemplet ovenfor:  

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

For en e-postadresse:

href="mailto:email@address.com"

For et telefonnummer:

href="tel:+4799999999"