🎨

Make beautiful buttons with this trick

Once you mastered our Email builder, you might want to tweak your email or landing page templates even more.

A simple HTM trick will help you to create the button of your dreams.

Go to your email builder and choose the text block:

image

Now you can edit the freshly added block by clicking on the Code View:

image

The text will turn into code, and this is where you can change colors and shape your button with a minimal HTML knowledge.

As first, let's copy the following code in, and I'll explain you each part. In no time you'll be a HTML magician. Here is the code:

<a class ="mobile-button" href="#" style="-webkit-text-size-adjust-100%;-ms-text-size-adjust:100%;font-site:16px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; color: #ffffff; border-radius: 3px;padding: 15px 25px;border: 1px solid #256F9C; display: inline-block;background-color: #256F9C" target="_blank">Learn more&nbsp;</a>

Once you copied the code, you have to click on the Code View button again for the changes to take effect.

Now let's see which part of the code changes our button and how:

Underline

<a class ="mobile-button" href="#" style="-webkit-text-size-adjust-100%;-ms-text-size-adjust:100%;font-site:16px; font-family: Helvetica, Arial, sans-serif; text-decoration: underline; color: #ffffff; border-radius: 3px;padding: 15px 25px;border: 1px solid #256F9C; display: inline-block;background-color: #256F9C" target="_blank">Learn more&nbsp;</a>

By changing text-decoration: none to text-decoration: underline, you can underline your link. Looks like this:

image

Background Color

<a class ="mobile-button" href="#" style="-webkit-text-size-adjust-100%;-ms-text-size-adjust:100%;font-site:16px; font-family: Helvetica, Arial, sans-serif; text-decoration: underline; color: #ffffff; border-radius: 3px;padding: 15px 25px;border: 1px solid #256F9C; display: inline-block;background-color: #eb4034" target="_blank">Learn more&nbsp;</a>

By changing the value of your background color you can change the color of the button:

image

Okay, but where do I get that hexadecimal number after the # sign from?

Glad you asked. You can just type 'colorpicker' into Google, and it will give you a full featured color picker where you can choose a color you like, and you'll get the HEX code in return.

image

Font Size

<a class ="mobile-button" href="#" style="-webkit-text-size-adjust-100%;-ms-text-size-adjust:100%;font-site:40px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; color: #ffffff; border-radius: 3px;padding: 15px 25px;border: 1px solid #256F9C; display: inline-block;background-color: #eb4034" target="_blank">Learn more&nbsp;</a>

By changing font size, you can make the font bigger. Looks like this:

image

Font Color

<a class ="mobile-button" href="#" style="-webkit-text-size-adjust-100%;-ms-text-size-adjust:100%;font-site:16px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; color: #FFD800; border-radius: 3px;padding: 15px 25px;border: 1px solid #256F9C; display: inline-block;background-color: #eb4034" target="_blank">Learn more&nbsp;</a>

By changing font color, you can change by editing color. Note, that I changed #ffffff (which is white) to yellow: #FFD800

image

Border Size and Color

<a class ="mobile-button" href="#" style="-webkit-text-size-adjust-100%;-ms-text-size-adjust:100%;font-site:16px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; color: #FFD800; border-radius: 3px;padding: 15px 25px;border: 1px solid #256F9C; display: inline-block;background-color: #eb4034" target="_blank">Learn more&nbsp;</a>

Hard to see, but there is actually a border around the button. You can change it's size and color by adding a pixel value to border. I made it thicker in this example. The color is changed by changing the hex value. I made it yellow.

image

Let's curve the edges

<a class ="mobile-button" href="#" style="-webkit-text-size-adjust-100%;-ms-text-size-adjust:100%;font-site:16px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; color: #FFD800; border-radius: 5px;padding: 15px 25px;border: 1px solid #256F9C; display: inline-block;background-color: #eb4034" target="_blank">Learn more&nbsp;</a>

You can make your button more curved by adjusting the border-radius value. Try 5 px for an extra curvyness.

image

Define the link

<a class ="mobile-button" href="https://yourwebsite.com" style="-webkit-text-size-adjust-100%;-ms-text-size-adjust:100%;font-site:16px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; color: #FFD800; border-radius: 5px;padding: 15px 25px;border: 1px solid #256F9C; display: inline-block;background-color: #eb4034" target="_blank">Learn more&nbsp;</a>

In the examples above, I used a placeholder for the link, but it's time to full it out now. Just add your link in the href="" area of your code.

Make sure you start it with HTTPS!

You can also edit the link by left-clicking on the link and editing the link field.

image

Change button width

<center><a class="mobile-button" href="https://yourwebsite.com" style="-webkit-text-size-adjust-100%;-ms-text-size-adjust:100%;font-site:16px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; color: #FFD800; border-radius: 5px;padding: 15px 25px;border: 1px solid #256F9C; display: inline-block;background-color: #eb4034; width: 40%;" target="_blank">Learn more&nbsp;</a></center>

You can easily make the button wider by adding width: 40%; to the settings. This will stretch your button sideways.

image

Center your button

<center><a class="mobile-button" href="https://yourwebsite.com" style="-webkit-text-size-adjust-100%;-ms-text-size-adjust:100%;font-site:16px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; color: #FFD800; border-radius: 5px;padding: 15px 25px;border: 1px solid #256F9C; display: inline-block;background-color: #eb4034; width: 40%;" target="_blank">Learn more&nbsp;</a></center>

You can center your button and it's content by wrapping it around the <center> and </center> tags.

image

Enjoy your beautiful buttons!

πŸ™‚
Any questions? We are happy to help you via πŸ“§ email or ☎️ phone.

Don’t have time? πŸ‘©β€πŸ’» Contact us and we’ll implement and design for you.