Hover Effect for Buttons

Overview

The Hover Effect for Buttons allows you to add style changes—such as background color, font color, and border styles—that activate when a mouse moves over a button on desktop devices. You can preview these effects directly in the stage and preview screen. This feature helps you create eye-catching buttons and calls to action, like subscribe or sign-up buttons, that draw attention and enhance engagement in your email and page designs.

Important: Hover effects are supported by about 60% of email clients, with notable limitations in Outlook on Windows. View a list of email clients that are compatible with the Hover Effect Button.

Which email clients support the hover effect for buttons? 

Hover effects are supported by about 60% of email clients, with notable limitations in Outlook on Windows. Reference this Can I Email resource to view a list of email clients that are and aren't compatible with the Hover Effect for Buttons.

The following GIF displays an example of a button within an email sent to an email client that does support the hover effect.

What happens if an email client doesn't support the hover effect for buttons?

If an email client doesn't support the hover effect for buttons, the email recipient will see the standard button properties used to design the button when they hover their cursor over it.

The following image displays an example of a button within an email sent to an email client that does not support the hover effect.

Prerequisites

Prior to getting started with this feature, ensure you have the following:

• A user role with the adequate permissions to access the Button Hover option under Content Properties.

How to Use

Take the following steps to apply the hover effect to a button within the builder:

1. Navigate to your design.
2. Add or identify the button you'd like to apply the hover effect to within your design.
3. Click the button on the stage.
4. Navigate to the Content tab on the sidebar on the right-hand side of the screen.
5. Scroll down to the Button Hover section under Content Properties.
6. Toggle on the Button hover option.
7. Complete the following information

• Background color
• Text color
• Border

Note: You can toggle on More options if you'd like more granular control over the customization of the Border.

8. Click Save to save your changes.

Important: The details you specified in step seven define the change in appearance of the button when the end user hovers their curser over it.

The following GIF provides a visual example of how to perform these steps.

Important Considerations

Consider the following when using this feature:

• Hover effects are supported by about 60% of email clients, with notable limitations in Outlook on Windows.
• View a list of email clients that are compatible with the Hover Effect Button.