Can I place a button in a Text Box instead of an image?

  • 0
  • 4
  • Question
  • Updated 4 years ago
  • Answered
I'd like to put a button in a Text Box combo instead of an image. Is there a way to do that with the Emma button?
Photo of Cynthia


  • 123 Posts
  • 29 Reply Likes

Posted 4 years ago

  • 0
  • 4
Photo of Kyle Gregory | Lipscomb University

Kyle Gregory | Lipscomb University

  • 3 Posts
  • 2 Reply Likes
Official Response
Hey Cyntha,

If I understand you correctly, you'd like to use a "call-to-action" button within your combo box. Unfortunately to my knowledge, you cannot do this yet using the editing tools. However, if you feel savvy enough you can do this with a little HTML and CSS knowledge. I'll describe the steps we took below. NOTE: different browsers/email clients will handle this differently, so test early and test often. Your mileage may vary.

1. Once you have your combobox set up and ready for your button (which I'm assuming will be near the bottom), put your cursor into the text area and switch over to HTML view on your combo box. The HTML view is the last button on the text editing toolbar. It looks like this: </>

2. Decided a few things about your button. Namely, do you want rounded corners? Color and text color of your button? How big do you want your button? I'll describe a few of these and some resources where to get them. Here's the example code I use:
<div class="e2ma-style" style="color: rgb(255, 255, 255); background-color: rgb(101, 54, 97); padding: 10px; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; width: 90px; float: left; text-align: center"><a href="" style="color: rgb(255, 255, 255); text-decoration: none" data-type="url" data-name="Name so Emma will track this link">Read More</a></div>
In the outer DIV: 
* color is the text color. background-color is the color of your button. You can get help with RGB colors here:
* Padding 10px adds a 10 pixel pad around the text of the button. Helps with the button look. Adjust as needed.
• -moz-border-radius, -webkit-border-radius, border-radius are the properties that give you the rounded corner look. These values should match. NOTE: Rounded corners only work in certain browsers and email clients. If you want a square button remove these three CSS properties.
• width sets how wide you want the button. You can adjust this up and down as you feel necessary. It might need to be wider if you have more text than "Read More."
• float and text-align should be left alone
In the Anchor (A):
• color set your text color here again. Some browsers/clients won't respect it on the outer div.
• text-decoration this overrides the anchor so you don't have your link underlined.

3. Your result should look similar to the image below:

Good luck. Write back if I need to explain any of this further.