Kadence – Customizing Button Styles

Your theme comes with three global button styles built right in – Base, Secondary, and Outline – so every button on your site looks cohesive without you having to style each one individually. This guide walks you through where to find them and what each setting does.

💡 Note: Secondary and Outline styles are a newer Kadence feature, so only my newer themes come pre-styled with all three. Follow this guide on how to style them!

Where to find the button settings

1. From your WordPress dashboard, go to Appearance > Customize
2. Click Colors & Fonts
3. Click Buttons

You'll see three button types listed: Base, Secondary, and Outline

💡 The Base button is your main "solid" button (the one used most often), secondary is your alternate solid style, and outline is a see-through button with just a border.

💡 You can also use the Style Guide to view how your buttons look. Additionally, you can click on each button type from the Style Guide to go directly to that button types settings.

Customizing each button type

Click into any of the three (Base, Secondary, or Outline) to open its settings.

Here's what you can adjust:

Text Color — set the color of your button's text. There are two tabs here: one for the normal state, and one for the hover state (what it looks like when someone's mouse is over it). Background Color — same idea, with a normal and hover tab. Border — click the border style icon (solid, dashed, or none), then set a Border Width in pixels. Border Radius — this controls how rounded your button corners are. A higher number = more rounded, all the way down to 0 for sharp corners. Font — choose the font family, weight, and size for your button text. Padding — the spacing between your button text and its edges. You'll usually want a bit more padding on the left/right than the top/bottom, so your buttons don't feel squished. Button Shadow and Hover Shadow — optional! These add a subtle drop shadow to your button, with separate settings for its normal state and hover state. Or you can disable it.

Adding a button to a page

Want to add a button to a page or post? Here's how:

1. In the page/post editor, click the + icon and search for "Buttons"

   

2. Add the blue Buttons (Adv) block, then click on the button itself to select it.

   

3. In the block settings panel on the right, look for Button Inherit Styles under the General tab. This is where you'll choose which of your three global styles to use: Theme Base, Theme Secondary, or Outline.

   

4. Type in your button text and add your link.

5. To move your button somewhere else, first click somewhere to the right or left side of the button to select the parent block. Then hold down on the 6 dots icon and you can drag and drop it wherever you want.

   

💡 Want this one button to look different from the rest? With the button still selected, you can override individual settings right there in the block settings, without affecting your global button styles anywhere else on the site. Just click the "Style" tab on the right to set the styles for it.

A couple things to know

• These settings are global — meaning if you change your Base button here, it updates everywhere that button style is used across your site. The one exception: if you've manually customized a specific button on a page, that button will keep its own custom styling instead of following the global update.
• Don't forget to click Publish once you're happy with how everything looks!