Are the buttons in your HTML email looking broken when you test it in Dark Mode? Here’s a roundup of the most common Dark Mode button problems and how to solve them.
Email Templates on Envato Elements
Before we dive in, don’t forget that you can download unlimited email templates with your Envato Elements subscription, to use with MailChimp, Campaign Monitor, and many other Email Service Providers. Envato Elements also gives you access to thousands of other creative assets, like stock photos, graphics, video templates, audio, Photoshop actions, you name it!
1. How to Fix Buttons With a Different Colour Behind the Text in Dark Mode
In Light Mode on the left, the button has white text on a blue background. In Dark Mode on the right, Outlook on Windows, iOS, Android and Outlook.com display a slightly different colour behind the text. Depending on the client you are seeing the issue in, this appearance can be caused by a few different things.
If You Are Seeing This Problem in Outlook.com Webmail, Outlook for iOS, or Outlook for Android
This occurs when the button has been built using CSS borders around the edge to simulate padding and create the solid button shape. This is generally done to make sure the entire surface of the button is clickable.
Buttons set up in this way have a background colour applied to the link text. In Dark Mode, Outlook.com, the Outlook App for iOS and the Outlook App for Android will all invert the background colour, but they don’t invert CSS border colours, so you end up with this mismatch.
How to Fix it
Make the border transparent, e.g. border: 8px solid transparent so that only the background colour of the link element shows through. This colour will still be inverted in Dark Mode, but at least your button will have a more uniform appearance.
If You Are Seeing This Problem in Outlook for Windows in Dark Mode
This same effect can happen if you have a VML button with a fill colour where there is also a background-color applied to the <a> tag or anything else inside the VML.
Outlook does not invert VML fill colours in dark mode, but it will invert the background colour that you have sitting on top of the VML shape, which gives you the differently coloured area.
How to Fix it
Make the <a> tag’s background transparent for Outlook only. You can do this by adding conditional CSS to the head of your email.
For example, if you have a link like this with a class of buttonlink: <a class="buttonlink"> you would include the following in the head of your email:
<!--[if mso]>
<style>
.buttonlink {background: transparent !important;}
</style>
<![endif]-->
2. How to Fix Different Coloured Text on VML Buttons in Outlook for Windows in Dark Mode
In Light Mode on the left, the button has dark text on a yellow background. In Dark Mode on the right, Outlook on Windows inverts the text but not the VML fill colour of the shape, which results in illegible grey text on a yellow background.
If you are using a VML button for Outlook, you may have noticed that part of the button (the VML shape element) stays its normal colour, whereas the text is being adjusted to a different colour.
Good news: this can be easily fixed! To find out how, see my other tutorial: How To Fix Outlook Dark Mode Problems.
3. How to Fix Buttons Disappearing Into the Background in Dark Mode
This often happens in the Gmail App for iOS/Android, the Outlook App for iOS/Android, in Outlook for Mac and at Outlook.com.
In Light Mode on the left, the button is black sitting on a white background. In Dark Mode on the right, the background has been changed to a very dark grey, and the button’s edges are now basically invisible.
These email clients will keep your button dark but flip the body background to be dark as well. Suddenly, your dark button’s edges are invisible. You might have tried normal borders and drop shadows to no avail.
If you can, even slightly adjusting the background of the button itself or the colour it sits on can yield a vastly improved outcome in Dark Mode.
But often the colours in your email are non-negotiable. In this case, you can try adding a border to the outside of your button in the same colour as the background in light mode. Many email clients don’t alter CSS border colours when they process colours for Dark Mode, so a border can often retain some level of contrast.
You can also try using the CSS outline property instead of the border property if you have a square button, and you can also fake a border by nesting a button inside a slightly padded element and applying a background to that. By using a background image or a linear-gradient, you can actually ensure that the colour of the fake border doesn’t change.
To learn how to do this, I’ll be publishing another tutorial very soon: Fixing common problems with borders in Dark Mode, so keep your eye out for that!
Conclusion
Dark mode can throw up some unexpected results in email development! As ever, testing your work as thoroughly as possible will prevent awkward mistakes, but hopefully these three troubleshooting situations will also help you.
No comments:
Post a Comment