Bulletproof Buttons - 2 Lines of text

Hi,
I'm playing around with the Bulletproof button tool and finding it really useful but I can't seem to find a way of adding a second line of text, can this be done at all?

paulw paulw, 2 years ago

Hey Virtual Unknown,

Although it isn't possible to add an extra line using the generator itself, you can edit the code that is produced. To do that, you can add a <br> to text to create a new line, just make sure you change that in both places! You may find that adding a new line changes the appearance quite a bit, so it might be necessary to tweak the code to get this working okay.

Hope this could help!


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Virtual_Unknown Virtual_Unknown, 2 years ago

Hi Paul,

Thanks for your reply, I hoped it would be that simple but I still couldn't get it working. Everytime I added a <br> it put a massive space in between the two lines and adjusting the line height just reduced the height of the whole button
When you say "just make sure you change that in both places!" which two places are you referring to?

<div><!--[if mso]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="URL" style="height:92px;v-text-anchor:middle;width:640px;" stroke="f" fillcolor="#8bc751">
    <w:anchorlock/>
    <center>
  <![endif]-->
      <a href="URL"
style="background-color:#8bc751;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:92px;text-align:center;text-decoration:none;width:640px;-webkit-text-size-adjust:none;">Line 1 Line 1 Line 1 Line 1 Line 1 Line 1<br>Line 2 Line 2 Line 2 Line 2 Line 2 Line 2 Line 2</a>
  <!--[if mso]>
    </center>
  </v:rect>
<![endif]--></div>
Stig Stig, 2 years ago

Hey Joe,

Sorry about the late reply here! I'll see if I can help you get this working the way you'd like. Do you have a mockup/screenshot of approximately how the final button should look?


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
ddnsknet, 2 years ago

ok thanks all


Sablon Kaos

Virtual_Unknown Virtual_Unknown, 2 years ago

Hi Stig,
No worries, I appreciate the help.

The button is quite large with two lines of text, it doesn't use a background image, just a solid flat colour.

http://i60.tinypic.com/25oz6a9.gif

Stig Stig, 2 years ago

Hey Joe,

Thanks for posting that, and sorry for taking so long to respond! I finally had a chance to look at this, and came up with the following:

<div><!--[if mso]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="URL" style="width:640px;" fillcolor="#8bc751" stroke="f">
    <v:textbox style="mso-fit-shape-to-text:t" inset="40px,22px,40px,22px">
      <center style="font-size:16px;line-height:24px;color:white;font-family:sans-serif;font-weight:bold;">Line 1 Line 1 Line 1 Line 1 Line 1 Line 1<br>Line 2 Line 2 Line 2 Line 2 Line 2 Line 2 Line 2</center>
    </v:textbox>
</v:rect><![endif]--><a href="URL"
style="background-color:#8bc751;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:24px;mso-hide:all;padding:22px 40px;text-align:center;text-decoration:none;width:560px;-webkit-text-size-adjust:none;">Line 1 Line 1 Line 1 Line 1 Line 1 Line 1<br>Line 2 Line 2 Line 2 Line 2 Line 2 Line 2 Line 2</a></div>

Changes I've made:
* Set the line-height to 24px in the HTML and VML versions of the button code.
* Added padding: 22px 40px; in the HTML button's CSS, and inset="40px,22px,40px,22px" in the VML button's <v:textbox> which does the same thing. Reduced the HTML button's width by 80px to make up for padding.
* Added style="mso-fit-shape-to-text:t" to the <v:textbox> to allow it to expand to fit multiple lines as needed.
* Removed xmlns:w="urn:schemas-microsoft-com:office:word" and <w:anchorlock> since it wasn't needed and caused some issues with this version of the button VML.

Hope that works OK for you, but let me know if you run into any trouble with it.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098