MJML Button - Clickability VS mobile version

Question

I am preparing a button for the full width of the email. The prepared button in MJML behaves well as far as the design and mobile version is concerned unfortunately outside only the text is clickable. MJML

<mjml>
  <mj-body width="540px">
    <mj-section padding="0px">
      <mj-column >
                <mj-button background-color="#000000" color="#ffffff" width="100%" href="https://www.google.com/" title="Button"  font-family="Verdana, Arial, sans-serif" font-size="16px" font-weight="normal" align="center" border-radius="0px" padding="0px"  inner-padding="10px 25px" >%%=v(@ButtonText)=%%</mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

HTML that adds to Marketing Cloud

<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:540px;" width="540" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="margin:0px auto;max-width:540px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:540px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="center" vertical-align="middle" style="font-size:0px;padding:0px;word-break:break-word;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:100%;line-height:100%;">
                          <tr>
                            <td align="center" bgcolor="#000000" role="presentation" style="border:none;border-radius:0px;cursor:auto;mso-padding-alt:10px 25px;background:#000000;" valign="middle">
                              <a href="https://www.google.com/" title="%%=v(@ButtonText)=%%" style="display:inline-block;background:#000000;color:#ffffff;font-family:Verdana, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:0px;" target="_blank"> %%=v(@ButtonText)=%% </a>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><![endif]-->

I have read that in order for the button to be clickable I need to change the width from % to px. Actually the change worked, but unfortunately then the mobile version breaks down and the email sort of becomes the desktop version (the email doesn't scale as nicely to the mobile version and the rest of the email has a very small font) Updated code MJML

<mjml>
  <mj-body width="540px">
    <mj-section padding="0px">
      <mj-column >
                <mj-button background-color="#000000" color="#ffffff" width="540px" href="https://www.google.com/" title="%%=v(@ButtonText)=%%"  font-family="Verdana, Arial, sans-serif" font-size="16px" font-weight="normal" align="center" border-radius="0px" padding="0px"  inner-padding="10px 25px" >%%=v(@ButtonText)=%%</mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

HTML

<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:540px;" width="540" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="margin:0px auto;max-width:540px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:540px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="center" vertical-align="middle" style="font-size:0px;padding:0px;word-break:break-word;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:540px;line-height:100%;">
                          <tr>
                            <td align="center" bgcolor="#000000" role="presentation" style="border:none;border-radius:0px;cursor:auto;mso-padding-alt:10px 25px;background:#000000;" valign="middle">
                              <a href="https://www.google.com/" title="%%=v(@ButtonText)=%%" style="display:inline-block;width:490px;background:#000000;color:#ffffff;font-family:Verdana, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:0px;" target="_blank"> %%=v(@ButtonText)=%% </a>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><![endif]-->

Does anyone have any ideas to make the button fully clickable and well behaved on mobiles?

Answer 1

I used the following solution to make the entire button clickable as well as responsive for mobile:

<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>