All Collections
Building Emails & Landing Pages
Dark Mode
Using Borders on Buttons in Dark Mode
Using Borders on Buttons in Dark Mode

Designing buttons for dark mode

Felix Higgs avatar
Written by Felix Higgs
Updated over a week ago

This information mostly relates to email clients that do not support dark mode editing. In those that do support it, you have more control over how your email will look in dark mode. Find out more about dark mode editing here.

If you are using a dark button over a light background, in Dark Mode this can often result in the background turning dark, but the button remaining unchanged. When this happens, the button can appear to blend into the background.

One way to improve this situation in some email clients (in particular Outlook for Mac, Outlook for Windows and webmail and smartphone apps) is to add a border to your button which matches the body background of your email.

This border will be invisible in Light Mode, but (in some email clients) it will remain unchanged in Dark Mode, while the background is adjusted. This helps to create some additional contrast which makes your button stand out more in Dark Mode.

In Light Mode, both buttons will look the same:

In Dark Mode, the border is visible and helps to stop the button from blending into the background:

When you are building in Knak, we’ll show a warning on the Optimize Tab when you have used a button without a border, and where we’d suggest that you add one.

Click ‘Highlight’ to view the relevant button, and click ‘Edit’ to edit it yourself.

You can also click ‘Apply Border’ to have a border added for you automatically.

Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email

Did this answer your question?