Buttons

Usage

Open Appearance → Customize → Styles → Buttons to set the default look of buttons across the site: block buttons, form submit buttons, and WooCommerce buttons.

Choose the Font, Size, Weight, and Transform, then set Horizontal Padding, Vertical Padding, Border Radius, and Border Width for the shape. Color sets the main button color from your Palette. Secondary Buttons sets the color for buttons that use the Alternate style.

When to use it

• After setting your Palette, to match buttons to your brand colors.
• When buttons feel too big, too square, or don't match your form fields. Match Border Radius with Styles → Forms.
• Before styling Hero, CTA, and Grid blocks that offer Button and Alternate link styles.

Tips

• Color fills the button and its border, with white text.
• Blocks set to the Alternate style use Secondary Buttons. Set it to Secondary or Accent for a clear second button color.
• Buttons on a section in your button Color (for example a Primary Background block, or a Group, Columns or Column with a Primary background, when Color is Primary; a Black one when Color is Text) switch to Secondary Buttons, so they don't disappear into the section. On a Group or Columns, buttons with a style or a color of their own keep it.
• Buttons in Secondary Buttons keep white text wherever it's easy to read on that color (a contrast of 4.5:1 or more). On a light color, such as a pale yellow or light gray, the text turns black. On hover they darken as usual, unless the text would get hard to read; then they keep their color.
• Border Width at 0 with a Border Radius above 0 gives solid pill buttons. A visible border works well for outline buttons over photos.
• Menu items styled as buttons use these settings too. Menu text is set under Styles → Navigation.
• Width shows when this style's font comes in several widths and is set to Full axis in Dirigible Fonts. Uncheck Default and drag the slider for a condensed (narrower) or expanded (wider) cut of the font; the slider covers only the widths the font has. Leave Default checked to keep the width the text has now.