Mjml: [Outlook-Android] mj-button link's color is not applied

[zygimantas]

mjml 3.3.2
mj-button is inside mj-column

<mj-button href="http://example" inner-padding="15px 50px">Example 1</mj-button>
<mj-button href="http://example" background-color="#444" inner-padding="15px 50px">Example 2</mj-button>
<mj-button href="http://example" background-color="#444" color="#fff" inner-padding="15px 50px">Example 3</mj-button>
<mj-button href="http://example" background-color="#444" color="#fff" font-size="15" font-family="'Helvetica Neue',Helvetica,Arial,sans-serif" inner-padding="15px 50px">Example 4</mj-button>
<mj-button href="http://example" container-background-color="#444" inner-padding="15px 50px">Example 5</mj-button>

Expected result:

A button with white text, transparent text background padding and rounded corners (where supported)
Button should be clickable on padding area (not solved with #557 )

Actual result:

Windows 10, Outlook 2016 (16.0.7927.1020) 32-bit

Android 7.0.0. Outlook 2.1.203 (should be the latest)

[iRyusa]

Hello @zygimantas

Looks like you can't use hexadecimal short-hand color ( 3 digits/letter instead of 6 ). Looks like to work when converting #444 to #444444

[dalefish]

A lot of clients don't work with the shorthand, always opt for the
long-form version as a base.

Kind Regards,

:----------------------------:
Dale McConnell

On 12 May 2017 at 12:14, Maxime Brazeilles [e-mail] wrote:

Hello @zygimantas https://github.com/zygimantas

Looks like you can't use hexadecimal short-hand color ( 3 digits/letter
instead of 6 ). Looks like to work when converting #444 to #444444

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/672#issuecomment-301039398, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AKxLOOPe-sV3qJkb8V-wQ6L9tHfhctHUks5r5DDqgaJpZM4NZFqa
.

[ngarnier]

+1 on the comments from @iRyusa and @dalefish.

About this point, we're currently testing but it's harder than it seems to have buttons clickable on the padding, working everywhere, and rendering correctly everywhere

Button should be clickable on padding area (not solved with #557 )

[zygimantas]

Hi @iRyusa @dalefish yes, you are right, after the change to #444444 button size is normal, but few issues are still left:

1. Text color on Android. The text is displayed in blue, as a link. The "color" property (value: #ffffff) on button is ignored.
2. Button is not clickable on padding.

Maybe the mjml tool should expand shorthand color codes on build?

[zygimantas]

That was the problem with link colors in mobile outlook: https://litmus.com/community/discussions/6419-outlook-mobile-app-in-android-not-respecting-font-colors

It works as expected if I remove style color property from the wrapping td.
Also a color is obeyed as long as the a tag is inside td or div with a different color specified.

[iRyusa]

Mh if it doesn't break anything in any other major emails client I don't mind to remove the color on wrapping td. But we have to test it to make sure color is applied everywhere

[zygimantas]

For those who will have the same issue, this is my workaround:

<mj-style inline="inline">td a {color: #ffffff !important}</mj-style>
...
<mj-button color="#eeeeee" href="#">Button</mj-button>
<mj-text color="#eeeeee"">
     <a href="#" style="color:#444444 !important">Link</a>
</mj-text>

#eeeeee is a "fake" value, only used to be different from #ffffff and #444444.

This way I managed to get a button with a white text and a dark link on both Outlook for Windows and Android.

[iRyusa]

Updating the title to match the real issue

[zygimantas]

The change fixed Android Outlook issue, but broke Outlook on Windows. Not on Windows, button text is blue, as a regular link, regardless of "color" attribute on button (mj-attributes)