CODEWITHSUNDEEP
emailtemplatesresponsivemjml
sizemattic
sizemattic

Reputation: 149

MJML Button with image

I am creating a responsive email template using MJML and I want to create a button with an image next to the text. Something like a custom button with an image of gear next to the word custom. Is there any way I can code in the image next to the text without making the entire button an image?

<mj-column>
    <mj-button padding="5px 1px"border-radius="0px" background-color="eeeeee" color="#333333" font-family="Arial" href="http://www.ugg.com/kids" width="100%">
        <span style="letter-spacing: 2px;"><mj-image width="40px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" witdh="40px" /> CUSTOM</mj-image></span>
        
    </mj-button>
</mj-column>

Upvotes: 2

Views: 7755

Answers (3)

Magnum26
Magnum26

Reputation: 275

I use the social element

<mj-social font-size="14px" icon-size="30px" mode="horizontal" align="left" padding-left="20px" padding-bottom="30px">
    <mj-social-element src="secondary_cta_dark.png" name="cta" padding="0 10px 0 0" href="#">
        Shop now
    </mj-social-element>
</mj-social>

Produces this

enter image description here

Upvotes: 3

kozanostra1907
kozanostra1907

Reputation: 66

You can try something like this: Just create your png/jpeg and put a href link for it.

 <mj-column vertical-align="middle"><mj-image src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" href="www.testdomain.de"></mj-image></mj-column>
    <mj-column vertical-align="middle">
      <mj-text color="#E60000" padding-bottom="10px" font-weight="bold" font-size="17px">Heading
      </mj-text>
      <mj-text padding-top="0px" padding-left="0px">
        <ul>
          <li><strong>Point 1 Lorem ipsum dolor</strong></li>
                        <li><strong>Point 2 filler text for testing</strong></li>
                        <li><strong>Point 3 Hello World()</strong></li>
        </ul>
      </mj-text>
    </mj-column>

Upvotes: 2

iRyusa
iRyusa

Reputation: 394

If you want to use an image inside a button, just use the regular HTML <img> tag. Buttons/Text and "content tag" in general accepts plain HTML, no MJML.

Upvotes: 3

Related Questions