Repository navigation
Entire button as link #359
Description
Activity
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.
Reacted by Matija Marohnić and Ismail MoghulReally 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.
Reacted by Adam, JJ Fliegelman, saltor, bennybee, Nathan Hadfield, Roman Korobeynikov, Camilo Lucero, Dylan Grafmyre, Youth1, Christian Brevik and 31 moreReacted by Shaun Befort and Andy Bao+1. The current button markup does not work for large call to actions.
Reacted by Di Ye and SusanThis would definitely be a nice feature. I will have to use clickable images as a workaround.
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.
- added 2 commits that reference this issue
on Sep 5, 2017 My workaround is to set the
<a>inside asdisplay: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.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? 😝
- I've just checked a Facebook mail, from a quick look it's a TABLE wrapped in an A, this will break in some clients. Kind Regards, :----------------------------: Dale McConnell…On 25 October 2017 at 10:34, Hugo Peek ***@***.***> wrote: 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? 😝 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#359 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKxLOCTEedOqXr7rt_d4RqVZFrsmMqQ4ks5svvKRgaJpZM4Jnymo> .
44 remaining items
@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 untilbox-sizing: border-boxis supported on all email clients.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:0pxI 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>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?
Still an issue in 2022
Environment = the VS Code extension
See gif: https://i.gyazo.com/4b9f106eab4e4fe0dd770ea5119dd04f.gifAny plans to fix this?
- As mention in the thread this is the best we can do to maximize compatibility.…On 7 Jun 2022, at 21:19, miketromba ***@***.***> wrote: Still an issue in 2022 (Environment is the VS Code extension) See gif: https://i.gyazo.com/4b9f106eab4e4fe0dd770ea5119dd04f.gif — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.
@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;"> </i> <![endif]--> <span style="mso-text-raise: 15pt;">Find jobs</span> <!--[if mso]> <i style="letter-spacing: 15px; mso-font-width: -100%;"> </i> <![endif]--> </a> </td>@Leffla48 Thanks! For some reason, unable to see it
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.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 usingmso-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:
Results MJML modified button:
Is this something MJML team can take? Or should I make a branch?
Reacted by zheng, Manuel Meurer, Gerard Reches, Ivan Voskoboinyk, Andreas Nüßlein, Dovydas Puluikis and Precious Udoibok- added a commit that references this issue
on Sep 18, 2023 - added a commit that references this issue
on Nov 22, 2023 do we still need this ?
Reacted by Andy Garbett, Iiro Krankka, Kristián Palovič, Omer Sabic, mateusz-daniluk-xtb, Katharina Wagner and House Helios
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>withhrefresults 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?