Button Color in Custom Module for Email

[kfowlkes]

Hey everyone -- I'm having trouble getting color-fields to work for a button I've built in a custom module. It appears as if the color picker gets overridden. The button just stays the normal blue link color.

Can someone tell me what the 'color-field' tag produces when styling inline? Or is there any best practices for building buttons for email in a custom module? I'd like to have this built to be able to use in the new drag & drop editor. I would use the native button in the d&d editor, but our brand style is to have an outlined button. In the classic editor I've been achieving this without issue by using the bulletproof button from Stig at Campaign Monitor in a rich text module.

We're also trying to avoid using CTAs for various reasons in our email, but also because we feel they don't render well (especially on apple devices).

Here's the current code I've been using in the custom module: 

<div style="text-align: center; padding-top: 10px; max-width: 100%; margin: 0px 20px 0px 20px;"><a href="{{ module.url_field }}" rel=" noopener"><!--[if mso]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ module.url_field }}" style="height:{{ module.button_height }}px;v-text-anchor:middle;width:{{ module.button_width }}px;" strokecolor="{{ module.outline_color }}" fillcolor="{{ module.fill_color }}">
    <w:anchorlock/>
    <center style="text-transform:uppercase;color:{{ module.text_color }};font-family:sans-serif;font-size:{{ module.button_text_size }}px;font-weight:bold;">{{ module.text_field }}</center>
  </v:rect>
<![endif]--></a><a href="{{ module.url_field }}" style="text-transform: uppercase; background-color: {{ module.fill_color }}; border: 2px solid; border-color: {{ module.outline_color }}; color: {{ module.text_color }}; display: inline-block; font-family: gill-sans-nova, roboto, helvetica, sans-serif; font-size: {{ module.button_text_size }}px; letter-spacing: 6px; font-weight: bold; line-height: {{ module.button_height }}px; text-align: center; text-decoration: none; width: {{ module.button_width }}px; -webkit-text-size-adjust: none; mso-hide: all;" rel=" noopener">{{ module.text_field }}</a></div>

All of the fields for the custom module work correctly, except for the color fields that I've implemented for the button fill, button outline & button text color.

Thanks for any help!!

[jennysowyrda]

Hi @kfowlkes,

Are you still experiencing this issue? 

If so, do you have a link to a public preview where we can view this issue? 

The more information, screenshots and details you can provide, the better the Community can assist.

Thank you,
Jenny