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.
Variable Font Options: those options will only be available if you are using a Google variable font such as Robo, Google Sans Flex, or Bitcount):
Variable Font Weight: Use the slider or type in a numeric value for the font weight.
Optical Sizing: Enable automatic optical size handling.
Variable Font Width: Fine-tune variable font width using variable font interpolation.
Variable Font Slant: Fine-tune variable font slant using variable font interpolation.
Variable Font Crsv: Fine-tune variable font crsv using variable font interpolation.
Variable Font Element Shape: Fine-tune variable font element shape using variable font interpolation.
Variable Font Element Expansion: Fine-tune variable font element expansion using variable font interpolation.
Variable Font Rond: Fine-tune variable font rond using variable font interpolation.
Variable Font Grade: Fine-tune variable font grade using variable font interpolation.
Variable Font Width: Fine-tune variable font width using variable font interpolation.
Button Text Size: Set the font size using any supported unit (px, em, rem, %, vw, vh, and more). It also accepts Global Variables.
Button Text Color: Pick a static color or assign a global color variable for sitewide consistency.
Button Line Height: Adjust vertical spacing between lines of text.
Button Letter Spacing: Increase or decrease the space between characters.
Button Capitalization: Choose the title text's capitalization:
Uppercase - All letters are in uppercase format
Capitalize - Makes the first letter of each word uppercase.
Lowercase - All letters are in lowercase format.
Smallcaps - Lowercase letters display as smaller uppercase letters.
All Small Caps - All letters display as small caps, including letters that were already uppercase.
Button Font Style: Select additional font styles, including:
Italic: Makes the text lean to the right.
Underline: Adds a line under the text.
Overline: adds a line above the text.
Strikethrough: draws a line through the middle of the text.
⚠️ Note: When Underline, Overline, and/or Strikethrough are enabled, you can also choose:Line Color: Choose the line's color. It also accepts Global Variables.
Line Thickness: Choose how thick or slim the line is.
Line Type: Choose the Line's type:
Solid
Double
Dotted
Dashed
Wavy
Button Line Warp Style: Choose how text should wrap. Default keeps native browser wrapping, Balanced evens heading lines, and Pretty helps avoid single-word endings.
Default: Text can move onto a new line when it runs out of space.
Balanced: Short text breaks into lines with more even lengths
Pretty: Text wrap in a cleaner, more visually pleasing way
Button Text Direction: Choose text flow direction. Standard Horizontal reads left-to-right across lines, while vertical modes stack glyphs top-to-bottom.
Standard Horizontal
Vertical (right to left): The text is displayed from top to bottom, and each new line starts to the left of the previous one.
Vertical (left to right): The text is displayed from bottom to top, and each new line starts to the left of the previous one.
Button Hyphenation: When enabled, if a word is too long to fit nicely on one line, the browser can break it into parts and add a hyphen at the break.
Button Fill Type: Choose the button's text fill options:
None - No button text fill.
Gradient - Fill the button text with a Gradient
Image - Fill the button text with an Image
Transparent - Fill the button text with a transparent fill.
Button Stroke Width - Choose the button text stroke thickness.
Button Stroke Color - Choose the button text's stroke color.
Button Columns: Set how many columns the text should flow through.
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.