Round buttons
The one thing that changes everything ✨
Step 1: Choose a button
If you already have the code for your round button, then you can skip this step.
We have created the best button for you. Does it not suit your needs, you can read this article, or generate a button here
Code for button:
1
<td class="button" align="center">
2
<div><!--[if mso]>
3
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:50px;v-text-anchor:middle;width:225px;" arcsize="73%" stroke="f" fillcolor="#FED34C">
4
<w:anchorlock/>
5
<center>
6
<![endif]-->
7
<a href="#"style="background-color:#FED34C;border-radius:50px;color:#0E1E6B;display:inline-block;font-family:sans-serif;font-size:18px ;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:225px;-webkit-text-size-adjust:none;">Welcome to Alpaco</a>
8
<!--[if mso]>
9
</center>
10
</v:roundrect>
11
<![endif]-->
12
</div>
13
</td>
Copied!
The button looks like this:
Step 2: Make the button editable
Create a New Component and paste in the code for the button.
We will make 3 Text Strings, so we can adjust:
- the button width
- write text
- insert a link
(Note that there is 2 href in this example)
Step 3: Check if everything works
If you made it this far, you are awesome ✨