Hover Effect for Buttons is available on all Beefree SDK plan types and is available for Email, Page, and Popup builders.
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.
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.
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.
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.
Prior to implementing the Hover Effect button, ensure you have the following:
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.
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.
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.
The hoverStyles object defines the visual changes that occur when a viewer hovers over a button with their cursor on a desktop. It allows you to set hover-specific styles such as font color, background color, and border appearance. These properties can be customized directly in the builder's Content Properties for the button. For example, changing the backgroundColor in the Button Hover sub-section of Content Properties will update the button to reflect that color when hovered over. You can reference an example of a complete Button Schema on the Content Defaults page.
Consider the following when using this feature:
The mobileStyles and hoverStyles properties are not supported by the Brand Style Management API.
