Knak has a built-in functionality to easily add hover states to button. This can be a great way to draw attention to important content and CTAs.
How to add a hover state
Drag a button element from the content bar to your asset.
Click on the button to reveal the content attributes in the right navigation.
Toggle on 'Use Hover Effects'.
You can now customize the text and button background color.
You can view the effect by previewing the email in Knak and hovering your cursor over the button.
A transition of 0.2s is automatically applied by default.
Email Limitations of Hover Buttons
While hover buttons are fully supported in landing pages, there are email client limitations for hover buttons.
Below is a list of email clients and how they support hover styles:
Apple Mail: Supports all three attributes (background-color, text-color, transition).
Yahoo Webmail: Supports all three attributes.
Gmail Webmail: Supports background-color and text-color. Transition is unsupported.
Outlook.com: Supports background color and text color. Transition is unsupported.
Outlook for Mac: Supports background color and text color. Transition is unsupported.
Everywhere else is unsupported.
Preview Limitations of Hover Buttons
When you create a button with hover styles in a module, and use that module in an asset, be sure to click and select the module to preview the hover effects.
For the best and most accurate preview, use our "Preview" option at the bottom right hand corner of the builder.
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com