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:
Now you can edit the freshly added block by clicking on the Code View:
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 </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:
<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 </a>
By changing text-decoration: none to text-decoration: underline, you can underline your link. Looks like this:
<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 </a>
By changing the value of your background color you can change the color of the button:
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.
<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 </a>
By changing font size, you can make the font bigger. Looks like this:
