EMAIL buttons are not colored #284
Labels
Comments
mathiasleroy
changed the title
|
To render HTML emails correctly you need to inline the CSS in <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style>#outlook a{padding:0}.ExternalClass,.ReadMsgBody{width:100%}.ExternalClass,.ExternalClass div,.ExternalClass font,.ExternalClass p,.ExternalClass span,.ExternalClass td{line-height:100%}.mui-container-fixed{width:600px;display:block;margin:0 auto;clear:both;text-align:left;padding-left:15px;padding-right:15px}</style>
</head>
<body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFF; color: #212121; font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, 'Trebuchet MS'; font-size: 14px; font-weight: 400; letter-spacing: 0.001em; line-height: 1.429; margin: 0; min-width: 100%; padding: 0; width: 100% !important;">
<table class="mui-body" cellpadding="0" cellspacing="0" border="0" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFF; border-collapse: collapse; border-spacing: 0; color: #212121; font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, 'Trebuchet MS'; font-size: 14px; font-weight: 400; height: 100%; letter-spacing: 0.001em; line-height: 1.429; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100%;">
<tr>
<td style="-moz-hyphens: auto; -ms-text-size-adjust: 100%; -webkit-hyphens: auto; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; hyphens: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; text-align: left; word-break: break-word;">
<center>
<!--[if mso]><table><tr><td class="mui-container-fixed"><![endif]-->
<div class="mui-container" style="clear: both; display: block; margin: 0 auto; max-width: 600px; padding-left: 15px; padding-right: 15px; text-align: left;">
<div>
<a href="#" class="mui-btn mui-btn--primary" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #2196F3; border-bottom: 1px solid #2196F3; border-left: 1px solid #2196F3; border-radius: 3px; border-right: 1px solid #2196F3; border-top: 1px solid #2196F3; color: #FFF; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; letter-spacing: 0.03em; line-height: 14px; padding: 10px 25px; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap;">Button</a>
<a href="#" class="mui-btn mui-btn--raised" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: transparent; border-bottom: 2px solid #bababa; border-left: 1px solid #e6e6e6; border-radius: 3px; border-right: 1px solid #e6e6e6; border-top: 1px solid #f2f2f2; color: #212121; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; letter-spacing: 0.03em; line-height: 14px; padding: 10px 25px; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap;">Button</a>
<a href="#" class="mui-btn mui-btn--raised mui-btn--primary" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #2196F3; border-bottom: 2px solid #0a6ebd; border-left: 1px solid #2196F3; border-radius: 3px; border-right: 1px solid #2196F3; border-top: 1px solid #51adf6; color: #FFF; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; letter-spacing: 0.03em; line-height: 14px; padding: 10px 25px; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap;">Button</a>
<a href="#" class="mui-btn mui-btn--raised mui-btn--danger" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #F44336; border-bottom: 2px solid #d2190b; border-left: 1px solid #F44336; border-radius: 3px; border-right: 1px solid #F44336; border-top: 1px solid #f77066; color: #FFF; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; letter-spacing: 0.03em; line-height: 14px; padding: 10px 25px; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap;">Button</a>
<a href="#" class="mui-btn mui-btn--raised mui-btn--accent" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FF4081; border-bottom: 2px solid #f30053; border-left: 1px solid #FF4081; border-radius: 3px; border-right: 1px solid #FF4081; border-top: 1px solid #ff73a3; color: #FFF; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; letter-spacing: 0.03em; line-height: 14px; padding: 10px 25px; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap;">Button</a>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]-->
</center>
</td>
</tr>
</table>
</body>
</html> |
|
Which tool did you use ? I used https://inliner.cm/ wich seem to be the best for every other elements than buttons (panels etc) But with inliner.cm, becomes background-color:transparent; these 3 are much worse : |
|
The MUI website is written in Python and uses premailer and the MUI source code example generator uses gulp-inline-css. Here's the gulp code block that inlines the source code's email example files: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Buttons do not render correctly in emails (outlook & gmail) : I don't see any color e.g.
it works well when stored to html file and viewed in browser
but not when send via email.
(I hope I'm doing it right, let me know otherwise)
The text was updated successfully, but these errors were encountered: