Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Entire button as link #359

Closed
jaypeedevlin opened this issue Aug 18, 2016 · 58 comments
Closed

Entire button as link #359

jaypeedevlin opened this issue Aug 18, 2016 · 58 comments

Comments

@jaypeedevlin
Copy link

Hi Guys,

Firstly - thanks for the great work in building mjml, it makes my life so much easier!

I'm not sure if this is possible or if it's already planned.

Currently, using <mj-button> with href results in the text on the button being linked, but not the button itself. For a large button with small text, this results in a large area that's not clickable.

Is it possible to change how the button links work so that the entire button is a link, rather than just the text?

@iRyusa
Copy link
Member

iRyusa commented Aug 23, 2016

Hi there,

I believe this is not implemented because of how older outlook behave. It could be done with some Outlook conditionnals but it will add so much overhead.

@joshuabaker
Copy link

Really great to hear this is considered. This is arguably quite an important feature. Buttons will almost exclusively be used as call to actions. Missed presses could be quite impactful to the success of emails.

@websirnik
Copy link

+1. The current button markup does not work for large call to actions.

@sbefort
Copy link

sbefort commented Feb 15, 2017

This would definitely be a nice feature. I will have to use clickable images as a workaround.

@ngarnier ngarnier moved this from Mid Term to Near Term in MJML Roadmap Feb 17, 2017
@ngarnier ngarnier added this to the 3.3.1 milestone Feb 17, 2017
@ngarnier ngarnier moved this from Near Term to Soon to be released in MJML Roadmap Apr 20, 2017
@ngarnier ngarnier removed this from the 3.3.3 milestone May 26, 2017
@ngarnier
Copy link
Member

Hey guys, we have an update on this. While we were hopeful we'd be able to release this in v3.3.3 and despite the great help of the community, we couldn't find a solution that would work everywhere (Outlook, webmails, mobile email clients...) and for all kinds of buttons (single-lined, multi-lined...).

You can see the discussion here: #668

We'll leave this issue open as we'd love as much as you all have a fully clickable button that works! Contributions welcome, as always.

@ngarnier ngarnier removed this from Soon to be released in MJML Roadmap May 31, 2017
Maistho added a commit to Maistho/mjml that referenced this issue Sep 5, 2017
Maistho added a commit to Maistho/mjml that referenced this issue Sep 5, 2017
@kalfooza
Copy link

My workaround is to set the <a> inside as display:block. This then fills the entire <td> as long as the padding on sides isn't too big. Even though it doesn't fill the entire button it does create a bigger clickable area and it doesn't seem to cause problems.

@hugopeek
Copy link

Yeah this would definitely be nice! But just checked a couple of emails, and it seems that many other systems are struggling with this as well..

FWIW: mails from Facebook and Zapier have fully clickable button inside. And something tells me they'll work in every client. So all we have to do is reverse engineer how they did it, right? 😝

@dalefish
Copy link

dalefish commented Oct 25, 2017 via email

@iRyusa
Copy link
Member

iRyusa commented Oct 25, 2017

Yeah having a table inside an a makes Desktop Outlook's button a totally unclickable

@hugopeek
Copy link

Zapier seems to have the <a> inside a table:

<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0">
    <tbody>
    <tr>
        <td style="font-family:&quot;Open Sans&quot;,Helvetica,Arial,sans-serif;border-radius:4px" bgcolor="#499DF3" align="center">
            <a class="m_9192...68883confirm-cta"
               href="https://zapier.com/goto/..."
               style="color:#499df3;font-size:14px;color:#ffffff;text-decoration:none;border-radius:4px;padding:13px 40px 13px 40px;display:inline-block;border-top:1px solid #499df3;"
               target="_blank"
               data-saferedirecturl="https://www.google.com/...">View
            More Updates</a>
        </td>
    </tr>
    </tbody>
</table>

But I think that means the button won't have padding in some versions of Outlook, right?

Found this also: https://buttons.cm/. But that adds a ton of VML code, which if I read correctly elsewhere is what you are trying to avoid, right? Understandable btw..

But I guess that's what Facebook is doing to make it work?

@iRyusa
Copy link
Member

iRyusa commented Oct 25, 2017

Yes, Outlook will totally ignore the padding on a.

The main issue on the VML button is you cannot use them inside a section with background because you can 't nest VML

@bertho-zero
Copy link
Contributor

Hi, is there anything new about this?

@bertho-zero
Copy link
Contributor

I do not know if it's compatible, but this patch works for me:

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-button inner-padding="0" />
    </mj-attributes>
    <mj-style inline="inline">
      .btn-link a {
        display: inline-block;
        padding: 10px 25px;
        border-radius: 3px;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-button href="https://google.fr" css-class="btn-link">
          Test
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Testable here: https://mjml.io/try-it-live/rkuGus9G7

@robertgaal
Copy link

We forgot to say that currently, 4.4.0-beta.1 is available to test with #359 (comment) @cossssmin proposal.

Feel free to give it a try and feedback !

Doesn't appear to be fixed in the beta either? At least in Gmail on Chrome.

@iRyusa
Copy link
Member

iRyusa commented Apr 25, 2019 via email

@robertgaal
Copy link

robertgaal commented Apr 25, 2019

Sure thing!

Here's the button:

<mj-button href="{{accept_url}}" height="46px" font-size="16px" inner-padding="5px" color="#fff" background-color="#003A8F" width="100%" border-radius="5px" font-weight="500">Accept</mj-button>

HTML:
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:100%;line-height:100%;"> <tr> <td align="center" bgcolor="#003A8F" role="presentation" style="border:none;border-radius:5px;cursor:auto;height:46px;padding:5px;background:#003A8F;" valign="middle"> <a href="{{accept_url}}" style="background:#003A8F;color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:500;line-height:120%;Margin:0;text-decoration:none;text-transform:none;" target="_blank"> Accept </a> </td> </tr> </table>

@ngarnier
Copy link
Member

@robertgaal Cédric answered you on the Slack, it's a different issue. I quote him:

@robert Now all the 'inner-padding' is clickable, which is better than just the text. In beta.2 (soon) they will be fully clickable when their width is defined in px, but when defined in % it will still be just the inner-padding

@iRyusa
Copy link
Member

iRyusa commented Apr 25, 2019 via email

@robertgaal
Copy link

robertgaal commented Apr 26, 2019

I've fixed my install, so thanks for the heads up. The button is indeed not fully linked but at least with inner-padding the area around the text is just a little more clickable. I'll change the button to simply use a flexible width, using inner-padding to make it completely clickable. Looking forward to beta.2!

@amidudu
Copy link

amidudu commented May 1, 2019

I took the version on the "next" branch and see that the fix for full width when working with px is working. But the button is still not fully clickable when using height, the upper and bottom part which are not part of the text are not clickable, any work planned on it?

@iRyusa
Copy link
Member

iRyusa commented May 1, 2019 via email

@amidudu
Copy link

amidudu commented May 2, 2019

I think that most of the use cases for buttons contains only one line of text, if this can ease on finding a bullet proof solution I would think it's worth creating one-liner-button component or expose attribute on the current implementation.

@iRyusa
Copy link
Member

iRyusa commented May 2, 2019

We want to cover as many case as possible with mj-button. Creating multiple components for a single purpose (buttons) would totally ruin the idea that each component can be use safely (or with a clean and decent fallback that doesn't ruin the design).

If https://buttons.cm/ or any border / padding based buttons technique are fine for you, you can just do your own component. It's not that hard to implement it.

@f0rmat1k
Copy link

@kmcb777 it has a bug. If you set width="100%" to button, it won't be clickable fully. <a> doesn't inherit width.

@kmcb777
Copy link
Collaborator

kmcb777 commented Jul 23, 2019

@f0rmat1k Hi, as said in the changelog : Fully clickable when width is in px, when width is in % only the inner-padding is clickable. It's still much better than before.
Unfortunately we can't do better until box-sizing: border-box is supported on all email clients.

@thebeard
Copy link

thebeard commented Sep 26, 2019

Hi everyone, just checking, as far as I can track from the conversation, it should be possible to have the whole button clickable when only using inner-padding.

However, this is what's compiled on my side:

<td align="center" bgcolor="#cc2128" role="presentation" style="border:none;border-radius:25px;cursor:auto;mso-padding-alt:15px 30px;background:#cc2128;" valign="middle">
  <p style="display:inline-block;background:#cc2128;color:#ffffff;font-family:'Roboto', sans-serif;font-size:15px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:15px 30px;mso-padding-alt:0px;border-radius:25px;"> Login to your account </p>
</td>

It gets rendered in a p tag and the p tag's style has a rule:
mso-padding-alt:0px

I have this in my head:

<mj-attributes>
    <mj-button border-radius="25px" background-color="#cc2128" inner-padding="15px 30px" font-size="15px"></mj-button>
</mj-attributes>

And this is the button implementation:
<mj-button href="https://example.com">Login to your account</mj-button>

@ProdigyMaster
Copy link

Hey, if I change button width in CSS, it becomes not fully clickable :
Take look at mobile version here: https://mjml.io/try-it-live/HyM1F1JY8

@iRyusa Is there any way around?

@miketromba
Copy link

miketromba commented Jun 7, 2022

Still an issue in 2022
Environment = the VS Code extension
See gif: https://i.gyazo.com/4b9f106eab4e4fe0dd770ea5119dd04f.gif

Any plans to fix this?

@iRyusa
Copy link
Member

iRyusa commented Jun 7, 2022 via email

@Leffla48
Copy link

Leffla48 commented Jun 9, 2022

@miketromba This is a code snippet of a button that I have had a lot of success with inside MJML. You can reorganize and use as an mjml html component. This one falls back on Outlook/Windows to square corners which I find is a lot lighter when certain ESPs ignore VML for click tracking.

<td align="right" valign="top" style="padding-top: 64px; padding-right: 24px; padding-bottom: 16px;" class="m-padding-right-16px">
<a href="URL GOES HERE" style="background-color: #ffffff; border-radius: 20px; border: 2px solid #4D64F8; font-size: 14px; font-family: 'Nunito', Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 8px 20px; color: #4D64F8; display: inline-block; mso-padding-alt: 0;">
<!--[if mso]>
<i style="letter-spacing: 15px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
<![endif]-->
<span style="mso-text-raise: 15pt;">Find jobs</span>
<!--[if mso]>
<i style="letter-spacing: 15px; mso-font-width: -100%;">&nbsp;</i>
<![endif]-->
</a>
</td>

@miketromba
Copy link

@Leffla48 Thanks! For some reason, unable to see it

@Leffla48
Copy link

Leffla48 commented Jun 9, 2022

@Leffla48 Thanks! For some reason, unable to see it

THanks for the heads up, updated it.

@fernamp
Copy link

fernamp commented Oct 21, 2022

You just need to add border: 1px #color solid; to the ahref.
The thing is that you have to keep track of the background color and the border colour so they mirror each other.
This can be done via a variable or manually.
MSO PC desktop is going to love it.

@fernamp
Copy link

fernamp commented Oct 28, 2022

This is the code that MJML produces when using
MJML
<mj-button href="www.google.com" border="1px solid red">Unmodified button</mj-button>

HTML

<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
    <tr>
        <td align="center" bgcolor="#414141" role="presentation" style="border:1px solid red; border-radius:3px; cursor:auto; background:#414141; mso-padding-alt:10px 25px;" valign="middle">
            <a href="www.google.com" style="display:inline-block; background:#414141; color:#ffffff; font-family:Ubuntu, Helvetica, Arial, sans-serif; font-size:13px; font-weight:normal; line-height:120%; margin:0; text-decoration:none; text-transform:none; padding:10px 25px; mso-padding-alt:0px; border-radius:3px;" target="_blank"> Unmodified button </a>
        </td>
    </tr>
</table>

What should happen is this:

HTML

<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate; line-height:100%;">
    <tr>
        <td align="center" bgcolor="#414141" role="presentation" style="border:1px solid red; border-radius:3px; cursor:auto; background:#414141;" valign="middle">
            <a href="www.google.com" style="display:inline-block; background:#414141; color:#ffffff; font-family:Ubuntu, Helvetica, Arial, sans-serif; font-size:13px; font-weight:normal; line-height:120%; margin:0; text-decoration:none; text-transform:none; padding:10px 25px; border-radius:3px; border: 1px solid #414141;" target="_blank"> Modified button </a>
        </td>
    </tr>
</table>

In MSO, <a> is an inline but UNMODIFIABLE element (it can't become a block, nor an inline-block), unless you trick MSO into think that the <a> is "something" cause it has a border, triggering the use of the display declaration and therefore, the use of the padding (so removing the tool that provides the inner spacing of the button using mso-padding-alt: 0px; is kind of weird (taking into account that adding padding to the <a> in MSO has no real effect).

This make the whole button clickable in MSO.
Results MJML button:
image

Results MJML modified button:
image

Is this something MJML team can take? Or should I make a branch?

ryan-saffer added a commit to ryan-saffer/react-booking-system that referenced this issue Sep 18, 2023
this will hopefully fix issues with the button not working on microsoft outlook on PC.
mjmlio/mjml#359
ryan-saffer added a commit to ryan-saffer/react-booking-system that referenced this issue Nov 22, 2023
this will hopefully fix issues with the button not working on microsoft outlook on PC.
mjmlio/mjml#359
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet