Our theme provides a centralized way to style all the buttons across your website. By setting up your Primary, Secondary, and Text buttons here, you ensure a consistent, professional design across all pages and widgets.
Accessing Button Settings
To manage your global button styles, navigate to Appearance → Customize in your WordPress dashboard, then go to General → Buttons.
1. Primary Button
The Primary Button style is used for the most important calls to action on your site (e.g., “Buy Now”, “Submit”, “Read More”).
Expand the Primary Button section to configure:
Colors
- Background Color: The resting background color. (If left empty, the theme’s global Accent Color is used automatically).
- Hover Background Color: The color the button changes to when hovered. (If left empty, a lightened version of your Accent Color is used).
- Text Color: The color of the text inside the button (usually White or Black, depending on the background).
- Hover Text Color: The text color on hover.
Shape & Borders
- Border Width: If you want your button to have a visible border, set the width here (in pixels).
- Border Radius: This controls how round the corners of your button are.
- Set all four corners to
0for sharp, square buttons. - Set them to a low number (e.g.,
4px) for slightly softened corners. - Set them to a high number (e.g.,
50px) for completely rounded, “pill-shaped” buttons. - Border Color & Hover Border Color: If you set a Border Width greater than 0, define the colors of that border here.
Typography
- Open the Typography panel to define the specific font family, weight, text-transform (e.g., ALL CAPS), and letter-spacing for the text inside your primary buttons.
2. Secondary Button
Secondary Buttons are used for alternative actions (e.g., “Learn More”, “Cancel”) placed next to a Primary button. They often have a less prominent design, such as an outline style (hollow background with a colored border) or a muted grey background.
Expand the Secondary Button section to configure:
- Colors: Set the Background, Hover Background, Text, and Hover Text colors.
- Shape & Borders: Define the Border Width, Radius, and Colors exactly as you did for the Primary button.
- Typography: Set the font styling for secondary buttons.
3. Text Button
Text Buttons are used for subtle links that function as buttons but look more like standard text with an icon or specific styling.
Expand the Text Button section to configure:
- Text Color: The default color of the text.
- Hover Text Color: The color on hover. (If left empty, the global Accent Color is used).
- Typography: Set the specific font family, weight, and sizing for text buttons.
Saving Your Changes
Once your button styles are perfectly aligned with your brand’s aesthetic, click the blue Publish button at the top of the Customizer to apply the changes across your entire site.