How do I make a link that looks like a button (html)

If you need a link in your product description, blog article etc. you can make it look like a button.

To do this you have to copy the code below and paste it into the html editor where you want your button to be.

Edit the colors and url as needed.

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

💡Tip:

To easily find the place in the html code where you want to add your button, type "ADD CODE HERE" in the wysiwyg editor, at the place you want your button to be. Open the html editor and it will be easy to find when you are scrolling through the html. Then just replace "ADD CODE HERE" with the button code.

In the example we have used an emoji in front of the link text to add an envelope.

You can link the button to your contact page, a product, a blog article ... whatever you want.