White Label End User Guide
Markdown FilesDeveloper DocsDeveloper Login
  • Quick Start Guide for Content Builder
  • Builders
    • Design Builder Overview
    • Page Builder
      • Internal Links for Page Navigation
  • Manage Files
    • File Manager
      • How to Move Files
  • Design Tools
    • Undo, Redo, and History
    • Mobile Optimization Options
    • Mobile Design Mode
    • Configuring Settings
    • Borders
    • Padding
    • Hover Effect for Buttons
    • Content Area Padding
    • Line Height
  • Dynamic Content
    • Display Conditions
  • Content Blocks
    • Table
    • Forms
      • Form Layout Customization
    • Video
    • Icons
    • GIF Animations and Animated Stickers
    • Custom HTML
    • Paragraph and List Content Blocks
    • Titles
    • Menus
    • Images
    • Dividers and Spacers
    • Letter and Paragraph Spacing
  • Reuse Content
    • Saved Rows
    • Hosted Saved Rows
      • Glossary of Common Terms
    • Synced Rows
  • Structure Content
    • Row vs. Content Block Selection
    • Row Properties
    • Column Management
  • Design for any Language
    • Multi-language Templates
  • Preview Options
    • Preview Designs
    • Dark Mode Preview
  • Team Collaboration
    • Co-editing in the Builder
    • Content Locking
  • AI Tools for Content Creation
    • Apply a Brand Tone
    • AI-Generated Images
    • AI-Generated Metadata
    • Bulk Generate Alt Text with AI
    • AI Writing Assistant
    • Automatic Translations
Powered by GitBook

GitHub

  • Edit on GitHub
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
  • How to Use
  • Important Considerations

Was this helpful?

Export as PDF
  1. Design Tools

Hover Effect for Buttons

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

Last updated 5 months ago

Was this helpful?

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, popup, and page designs.

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

  1. Toggle on the Button hover option.

  1. Complete the following information

    1. Background color

    2. Text color

    3. Border

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

  2. Click Save to save your changes.

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

Important Considerations

Consider the following when using this feature:

  • The hover effect is available for email, page, and popup designs.

  • 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
list of email clients that are compatible with the Hover Effect Button
this Can I Email resource