The Button design options let you customize button styles directly within the module. By toggling custom styles, you can control button text, colors, borders, icons, and shadows to align with your design needs while maintaining flexibility over global and individual settings.
Where to Find the Button Options
Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Design Tab: Locate the Button option group.
Button Customization Settings
Background
Controls the appearance of the button background. Divi 5 offers six background types, each available as its own tab. You can combine them (for example, a solid color base with a gradient overlay and a pattern on top).
Background Color: Apply a solid color fill.
Background Gradient: Apply a multi-stop gradient with control over direction, type (linear or radial), and color stops.
Background Image: Upload or link an image and adjust size, position, repeat, and blend mode.
Background Video: Embed an MP4 or WebM video as a looping background.
Background Mask: Apply a pre-built mask shape over the background for layered visual effects.
Background Pattern: Overlay a repeating pattern on top of the background.
Border
Controls the shape and edge of the button.
Button Border Radius: Set the corner radius. Keep the chainlink icon locked for uniform corners or unlink it to round each corner independently. A higher value produces rounder corners.
Button Border Styles: Configure the border appearance:
Border Width: Define the border thickness (minimum
1px).Border Color: Pick a static color or assign a global color variable.
Border Style: Choose solid, dashed, dotted, double, groove, ridge, inset, outset, or none.
Text
Controls the typography of the button label.
Button Font: Choose a font from the Google Fonts library or upload a custom font.
Button Font Weight: Set the weight. Options include thin, light, regular, bold, and every weight in between.
Button Font Style: Apply italic, uppercase, capitalize, underline, or strikethrough.
Button Text Color: Pick a static color or assign a global color variable for sitewide consistency.
Button Text Size: Set the font size using any supported unit (px, em, rem, %, vw, vh, and more).
Button Letter Spacing: Increase or decrease the space between characters.
Button Line Height: Adjust vertical spacing between lines of text.
Button Text Shadow: Add a shadow behind the button text. Customize horizontal position, vertical position, blur strength, and color.
Icon
Controls the icon that appears alongside the button text.
Show Button Icon: Toggle on to display an icon in the button. When disabled, the button shows text only, and the remaining icon settings are hidden.
Button Icon: Pick the icon shown in the button. Select from the ET icon library or the Font Awesome library.
Button Icon Color: Set the icon color. Pick a static color or assign a global color variable.
Button Icon Placement: Position the icon to the left or right of the button text.
Only Show Icon on Hover for Button: Toggle the icon's visibility behavior:
On: The icon appears only when a user hovers over the button.
Off: The icon is always visible.
Sizing
Controls the button's dimensions and alignment within its container.
Button Width: Set the button's width using any supported unit (px, %, em, rem, vw, and more).
Button Max Width: Cap the button's width so it never exceeds a specified value, even on wider screens.
Button Module Alignment: Align the button to the left, center, or right of its container.
Button Min Height: Set a minimum height so the button never shrinks below a specified value.
Button Height: Set the button's fixed height.
Button Max Height: Cap the button's height so it never exceeds a specified value.
Tips for Using Button Options
Ensure Visibility: Use contrasting Background and Text Color values to keep buttons clearly clickable.
Match Site Typography: Align Button Font, Font Weight, and Letter Spacing with the rest of your site for a consistent look.
Use Global Colors: Assign global color variables to Text Color, Border Color, and Icon Color so sitewide palette changes update buttons automatically.
Control Hover Behavior: Enable Only Show Icon on Hover for Button for a cleaner resting state that reveals the icon when users interact with the button.
Keep Heights Consistent: Set Button Min Height or Button Height when placing multiple buttons side by side so they stay visually aligned.
Mind Mobile Tap Targets: Keep button dimensions at 44px or larger on touch devices so users can tap them comfortably.