### mj-button

Displays a customizable button.

<figure>
  <img src="https://static.mailjet.com/mjml-website/documentation/button-example.png"
       alt="desktop" width="150px" />
</figure>

<div class="alert alert-important" role="alert">
  <p>Important</p>
  <p>The <code>mj-button</code> won't be fully clickable because of client support.
  See discussion at
    <a href="https://github.com/mjmlio/mjml/issues/359">Issue #359</a>.</p>
</div>

```xml
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-button font-family="Helvetica" background-color="#f45e43" color="white">
          Don't click me!
         </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
```

<div class="alert alert-note" role="alert">
  <p>Note</p>
  <p><code>mj-button</code> is an "ending tag", which means that it can contain HTML code but it cannot contain other MJML components.</p> 
  <p>More information about ending tags <a href="#ending-tags">in this section</a>.</p>
</div>

#### Attributes

| attribute                  | accepts                            | description                                           | default value                          |
| -------------------------- | ---------------------------------- | ----------------------------------------------------- | -------------------------------------- |
| align                      | `left` `center` `right`            | horizontal alignment                                  | `center`                               |
| background-color           | CSS color formats                  | button background-color                               | `#414141`                              |
| border                     | string                             | CSS border format                                     | `none`                                 |
| border-bottom              | string                             | CSS border format                                     |                                        |
| border-left                | string                             | CSS border format                                     |                                        |
| border-radius              | string                             | border radius                                         | `3px`                                  |
| border-right               | string                             | CSS border format                                     |                                        |
| border-top                 | string                             | CSS border format                                     |                                        |
| color                      | CSS color formats                  | text color                                            | `#ffffff`                              |
| container-background-color | CSS color formats                  | button container background color                     |                                        |
| css-class                  | string                             | class name, added to the root HTML element created    |                                        |
| font-family                | string                             | font name                                             | `Ubuntu, Helvetica, Arial, sans-serif` |
| font-size                  | `px`                               | text size                                             | `13px`                                 |
| font-style                 | string                             | CSS values, e.g. `normal` `italic` `oblique`          |                                        |
| font-weight                | string                             | text thickness                                        | `normal`                               |
| height                     | `px` `%`                           | button height                                         |                                        |
| href                       | string                             | URL format                                            |                                        |
| inner-padding              | `px` `%`                           | inner button padding, <br>supports up to 4 parameters | `10px 25px`                            |
| letter-spacing             | `px` `em`                          | letter-spacing                                        |                                        |
| line-height                | `px` `%`                           | line-height on link                                   | `120%`                                 |
| name                       | string                             | specify the name attribute for the button link        |                                        |
| padding                    | `px` `%`                           | button container padding, supports up to 4 parameters | `10px 25px`                            |
| padding-bottom             | `px` `%`                           | button container bottom padding                       |                                        |
| padding-left               | `px` `%`                           | button container left padding                         |                                        |
| padding-right              | `px` `%`                           | button container right padding                        |                                        |
| padding-top                | `px` `%`                           | button container top padding                          |                                        |
| rel                        | string                             | specify the rel attribute for the button link         |                                        |
| target                     | string                             | specify the target attribute for the button link      | `_blank`                               |
| text-align                 | `left` `center` `right`            | text-align button content                             |                                        |
| text-decoration            | string                             | underline/overline/none                               | `none`                                 |
| text-transform             | string                             | capitalize/uppercase/lowercase                        | `none`                                 |
| title                      | string                             | tooltip & accessibility                               |                                        |
| vertical-align             | `top` `bottom` `middle` `vertical` | vertical alignment                                    | `middle`                               |
| width                      | `px` `%`                           | button width                                          |                                        |

<p class="cta-container"><a class="cta" href="https://mjml.io/try-it-live/components/button">Try it live</a></p>