Back to Mjml

Mjml Mso Button

doc/mjml-mso-button.md

5.1.01.3 KB
Original Source

mjml-msobutton

A button that uses the VML solution for radius, which is supported in Outlook desktop

It uses the same attributes as the standard mj-button but includes three additional ones:

attributeacceptsdescriptiondefault value
mso-proofbooleanActive the bulletproof modefalse
mso-widthpxThe width of the VML solution200px
mso-heightpxThe height of the VML solution40px

These new attributes allow MJML to generate a “bulletproof button“ which incorporates radius, stroke and alignment, using this method,

It's available on Github and NPM.

Usage

Use it like a standard mj-button:

html
<mj-msobutton mso-proof="true">Click !</mj-msobutton>

Problems that you should know

  1. This cannot be used with an image in background
  2. It creates a duplication of code in the HTML
  3. The width and the height cannot be used with the auto value.

Sample project on github here