Hover Effect for Buttons
Overview
The Hover Effect allows end users to design a standard view of buttons within their design, and a hover view of the button when a viewer of their email, page, or popup design hovers their cursor over the button. The Hover Effect for Buttons is available as a new content property available under the Content tab located within the builder's sidebar. Through applying this Hover Effect, your application's end users can design more attention-grabbing buttons within their design. Reference the Hover Effect for Buttons End User Guide to learn more about how this experience is for your application's end users. Continue reading this page to learn more about how to implement this feature.
To learn more about the end user experience and what it looks like to utilize this feature on the frontend, visit the Hover Effect for Buttons white label end user documentation. The markdown file is also available in our white label docs repository.
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 implementing the Hover Effect button, ensure you have the following:
Activation Steps
Take the following steps to toggle on and activate the Hover Effect for Buttons for your application:
Log in to your Beefree SDK Developer Console.
Navigate to the application where you'd like to enable Hover Effect for Buttons.
Click Details to navigate to the application's details.
Click Application configuration.
Scroll to the Services section.
Toggle on the Enable button hover feature.
The Button Hover section is now available under Content Properties within your application's builder.
Content Defaults
The following table outlines the properties available within the hoverStyles
object for buttons. These properties define the visual styles applied to a button when hovered over, including text color, background color, and border styles. Each property can be customized to create engaging and visually dynamic buttons that respond to the viewer's interaction.
HoverStyles Properties
The following table displays each hoverStyles
property and its corresponding data type, example, and description.
color
String
"#FFFFFF"
Sets the font color of the button when hovered.
backgroundColor
String
"#16688B"
Defines the background color of the button on hover.
borderTop
String
"0px solid transparent"
Specifies the top border's size, style, and color for the button when hovered.
borderLeft
String
"0px solid transparent"
Specifies the left border's size, style, and color for the button on hover.
borderBottom
String
"0px solid transparent"
Specifies the bottom border's size, style, and color for the button on hover.
borderRight
String
"0px solid transparent"
Specifies the right border's size, style, and color for the button on hover.
HoverStyles Inside the Button Schema
Additional Considerations
Consider the following when using this feature:
The
mobileStyles
andhoverStyles
properties are not supported by the Brand Style Management API.
Last updated
Was this helpful?