mjml Clickable button, not just the text inside the button

Question

I have this basic code to display a buttom link on an mjml document, and it kind of works but I want the clicable area to be the whole buttom.

Here is the code:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-button href="#" font-family="Helvetica" background-color="black" color="white" padding-top="50px" inner-padding="20px" width="70%">
                    GET YOUR TICKET
                </mj-button>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

You can test the code live at https://mjml.io/try-it-live/

score 3 · Answer 1 · answered Aug 25 '22 at 12:17

I used the following solution to make the entire button clickable

<mj-style>
  .btn_block a {
    display: block !important;
  } 
</mj-style>

<mj-section>
  <mj-column>
    <mj-button href="www.example.com" css-class="btn_block" line- 
      height="20px" inner-padding="15px" width="100%" font- 
      family="Helvetica" background-color="#2ea3ff" color="#ffffff">
        Button Text
    </mj-button>
  </mj-column>
</mj-section>

BaldEagle · Answer 2 · 2020-10-19T19:47:08.170

The MJML team has received lots of requests for the fully-clickable button you pursue. In version 4.4.0 (2020-07-30), they released an updated and improved version. One piece of documentation (confirming AmAn KumAr's advice) indicates the button is fully clickable when width is in px and not %.

Some seem to dispute the "fully clickable" assertion. The team has responded that the current button has the best balance among various email clients. That is, if they change the HTML to improve the button for one client (maybe Outlook), the change will break another client worse.

If you're not using at least 4.4.0, consider an upgrade. The versions since 4.4.0 include great improvements. Available on NPM. The current version is 4.7.1. The MJML Desktop App had (last I saw) a 4.6 version. Either way helps you.

BTW: Nothing against the support here, but there's lots of great MJML support for questions just like this at https://slack.mjml.io/.

score -1 · Answer 3 · answered Oct 12 '20 at 18:00

Don't use percentage to increase the width use px.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-button href="#" font-family="Helvetica" background-color="black" color="white" padding-top="50px" inner-padding="20px" width="500px">
          GET YOUR TICKET
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

mjml Clickable button, not just the text inside the button

3 Answers3