LogoLogo
Try it outResourcesAPIsAddOnsBook a demo
  • Getting Started
    • Introduction to Beefree SDK
      • Create an Application
      • Installation and Fundamentals
        • Configuration parameters
          • Configuration Reload
          • Workspaces
          • Debugging the Beefree SDK Editor
        • Methods and Events
        • Authorization Process
        • How the UID parameter works
        • Set up two-factor authentication
        • Naming conventions
      • Development Applications
      • Manage Users
      • Manage Subscriptions
      • Installation and Fundamentals
    • Tracking Message Changes
    • Sample Code
    • Release Candidate Environment
  • Visual Builders
    • Email Builder
    • Page Builder
      • Integrating Page Builder
      • Embedding videos in a page
    • Popup Builder
      • Popup Builder - Getting Started
      • Testing and Integrating
      • Setting layout and size
        • Advanced settings
    • AI-Driven Design Creation
  • APIs
    • Content Services API
      • Authentication
      • Export
      • Convert
      • Row Processing
      • AI Collection
      • Brand Style
    • Template Catalog API
      • Authentication
      • Templates
      • Categories
      • Collections
      • Designers
      • Tags
    • HTML Importer API
      • Authentication
      • Import HTML
  • Forms
    • Form Block
    • Integrating and using the Form block
      • Passing forms to the builder
      • Form structure and parameters
      • Form layout customization
      • Allowed form fields
      • Edit form field modal
  • Rows
    • Reusable Content
      • Create Reusable Content
        • Pre-build Reusable Content
          • Implement Custom Rows
        • Save Reusable Content
          • Implement Hosted Saved Rows
          • Implement Self-hosted Saved Rows
            • Self-hosted Saved Rows Concepts and Tutorial
      • Sync Reusable Content
        • Implement Synced Rows
        • Initialize Edit Single Row Mode
      • Manage Reusable Content
    • Storage for Reusable Content
      • Hosted Saved Rows
      • Self-Hosted Saved Rows
  • File manager
    • File manager application overview
      • Mime Types and Groups
  • Server-side configurations
    • Server-side options
      • Toolbar options
      • Storage options
        • Configure your AWS S3 bucket
        • Connect your file storage system
      • Content options
      • Services options
      • Undo & Changes history
      • Custom JavaScript Libraries Injection
  • Other Customizations
    • Advanced options
      • Special Links and Merge Tags
      • Content Dialog
      • Custom Color Palette
      • Font management
      • Roles and Permissions
      • Smart Merge Tags
      • Commenting
      • Custom Attributes
      • Meta Tags
      • Custom Languages
      • Display Conditions
      • Advanced Permissions
      • Custom File Picker
      • Custom Headers
    • Appearance
      • Content Defaults
      • Custom Sidebar Position
      • Content Tile Sorting
      • Content Tile Grouping
      • Loading Spinner Theme
      • Custom Tab Layout
      • Themes
      • Custom CSS
        • Change Log
    • AMP for Email
    • Collaborative Editing
      • Co-editing Integration Guide
    • Mobile Design Mode
    • Multi-language Templates
    • Cards Style and Image Round Corners
    • Hover Effect for Buttons
    • Content Area Padding
    • Line Height
  • Data Structures
    • Getting Started
    • Schema Catalog
    • Simple Schema
      • Template Schema
      • Definitions Schema
      • Row Schema
      • Column Schema
      • Title Schema
      • Image Schema
      • Button Schema
      • Paragraph Schema
      • HTML Schema
      • Menu Schema
      • List Schema
      • Icon Schema
      • Divider Schema
    • Row Metadata
    • Form Validation Schema
    • Comments Schema
      • Change Schema for Comments
  • Builder AddOns
    • AddOns
      • AddOns Overview
      • Partner AddOns
        • Partner AddOns directory
        • Installing Partner AddOns
        • DeepL
        • Stability AI
        • Azure AI Vision - Image Analysis
          • Alternate Text Generation with AI
          • AI Alt Text Bulk Generation
        • AI Writing Assistant
          • Available Providers
            • OpenAI
            • Azure OpenAI
            • Anthropic
          • AI Providers and Data Security
          • AI-Generated Meta Tag Fields
          • Token Upselling
          • Apply a Brand Tone
        • Custom AI Writing Assistant
      • Custom AddOns
        • AddOn Development
        • Contribute to the Partner AddOn Marketplace
      • AddOns Configuration
      • AddOn FAQs
  • Resources
    • Error Management
      • onWarning
      • Beefree SDK Editor Errors
      • File System Provider errors
      • JSON Parser errors
      • Template Validation and Update
      • Template validation and update errors
    • Scheduled maintenances
Powered by GitBook
LogoLogo

Policies

  • Privacy & Cookies
  • Terms of Services
  • GDPR Compliance
  • Trust Center

Contact Us

  • Submit a request
  • Book a demo
  • Report a security issue

Resources

  • Developer website
  • Create a Developer Account

© Bee Content Design, Inc. San Francisco, CA | Part of Growens

On this page
  • Overview
  • Which email clients support the hover effect for buttons?
  • What happens if an email client doesn't support the hover effect for buttons?
  • Prerequisites
  • Activation Steps
  • Content Defaults
  • HoverStyles Properties
  • HoverStyles Inside the Button Schema
  • Additional Considerations

Was this helpful?

Export as PDF
  1. Other Customizations

Hover Effect for Buttons

PreviousCards Style and Image Round CornersNextContent Area Padding

Last updated 5 months ago

Was this helpful?

Hover Effect for Buttons is available on and is available for Email, Page, and Popup builders.

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 white label end user documentation. The markdown file is also available in our .

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

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 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:

  1. Navigate to the application where you'd like to enable Hover Effect for Buttons.

  2. Click Details to navigate to the application's details.

  3. Click Application configuration.

  4. Scroll to the Services section.

  5. 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.

Name
Data Type
Example
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

"hoverStyles": {
  "color": "#FFFFFF",
  "backgroundColor": "#16688B",
  "borderTop": "0px solid transparent",
  "borderLeft": "0px solid transparent",
  "borderBottom": "0px solid transparent",
  "borderRight": "0px solid transparent"
}

Additional Considerations

Consider the following when using this feature:

Log in to your .

Note: This feature is disabled by default for all existing applications. For new applications, it is enabled by default in the and Builder, but is disabled by default for the Builder.

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 .

The mobileStyles and hoverStyles properties are not supported by the .

View a .

Beefree SDK Developer Console account
Any Beefree SDK plan type
Beefree SDK Developer Console
Page
Popup
Email
Brand Style Management API
list of email clients that are compatible with the Hover Effect Button
all Beefree SDK plan types
Hover Effect for Buttons
white label docs repository
list of email clients that are compatible with the Hover Effect Button
this Can I Email resource
Button Schema on the Content Defaults page