{"id":5339,"date":"2020-11-06T11:50:09","date_gmt":"2020-11-06T18:50:09","guid":{"rendered":"https:\/\/kadence-theme.com\/?post_type=knowledgebase&#038;p=947"},"modified":"2026-04-22T15:53:21","modified_gmt":"2026-04-22T15:53:21","password":"","slug":"style-buttons","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/style-buttons\/","title":{"rendered":"How to Style Buttons in the Kadence Theme"},"content":{"rendered":"\n<p>The <strong>Kadence<\/strong> <strong>Theme<\/strong> includes a <strong>global<\/strong> <strong>Button<\/strong> <strong>Styles<\/strong> <strong>system<\/strong>, allowing you to define and manage how buttons appear across your site. These settings apply to both theme-based buttons and buttons added via blocks, ensuring a consistent design.<br><br>The Button Styles in the Customizer replace the need to manually style individual buttons, while giving you global control over their appearance. This document will explain where to find these settings, how they connect to the theme and block buttons, and the differences between each style type.<\/p>\n\n\n<style>.kb-image5339_3ec657-b8.kb-image-is-ratio-size, .kb-image5339_3ec657-b8 .kb-image-is-ratio-size{max-width:500px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_3ec657-b8.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_3ec657-b8 .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_3ec657-b8 figure{max-width:500px;}.kb-image5339_3ec657-b8 .image-is-svg, .kb-image5339_3ec657-b8 .image-is-svg img{width:100%;}.kb-image5339_3ec657-b8 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_3ec657-b8\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2322\" height=\"1672\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons.jpg\" alt=\"Style Guide Buttons\" class=\"kb-img wp-image-16093\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons.jpg 2322w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons-300x216.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons-1024x737.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons-768x553.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons-1536x1106.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons-2048x1475.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons-360x259.jpg 360w\" sizes=\"auto, (max-width: 2322px) 100vw, 2322px\" \/><\/figure><\/div>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id5339_42da3a-19 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id5339_42da3a-19 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id5339_42da3a-19 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id5339_42da3a-19 .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5339_76bf6f-44, .wp-block-kadence-advancedheading.kt-adv-heading5339_76bf6f-44[data-kb-block=\"kb-adv-heading5339_76bf6f-44\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5339_76bf6f-44 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5339_76bf6f-44[data-kb-block=\"kb-adv-heading5339_76bf6f-44\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5339_76bf6f-44 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5339_76bf6f-44[data-kb-block=\"kb-adv-heading5339_76bf6f-44\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"getting-started\" class=\"kt-adv-heading5339_76bf6f-44 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading5339_76bf6f-44\">Getting Started<\/h2>\n\n\n\n<p>The Kadence Button Colors Feature is a part of the&nbsp;<a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/theme-installation\/\" target=\"_blank\" rel=\"noreferrer noopener\">free Kadence Theme \u29c9<\/a>.<br><br>With the Kadence Theme active, you can control global button appearance from the <strong>Customizer \u2192 Colors &amp; Fonts \u2192 Buttons<\/strong> settings. You will see three button types: the <a href=\"#base-button-styles\">Base Button Styles<\/a>, <a href=\"#secondary-button\">Secondary Button Styles<\/a>, and the <a href=\"#outline-button\">Outline Button Styles<\/a>.<\/p>\n\n\n<style>.kb-row-layout-id5339_520cb6-e2 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id5339_520cb6-e2 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id5339_520cb6-e2 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);}.kb-row-layout-id5339_520cb6-e2 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}.kb-row-layout-id5339_520cb6-e2 > .kt-row-column-wrap{grid-template-columns:repeat(3, minmax(0, 1fr));}.kb-row-layout-id5339_520cb6-e2 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id5339_520cb6-e2 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}}@media all and (max-width: 1024px){.kb-row-layout-id5339_520cb6-e2 > .kt-row-column-wrap{grid-template-columns:repeat(3, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id5339_520cb6-e2 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}.kb-row-layout-id5339_520cb6-e2 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id5339_520cb6-e2 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-3-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column5339_6013c2-7b > .kt-inside-inner-col,.kadence-column5339_6013c2-7b > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column5339_6013c2-7b > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column5339_6013c2-7b > .kt-inside-inner-col{flex-direction:column;}.kadence-column5339_6013c2-7b > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column5339_6013c2-7b > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column5339_6013c2-7b{position:relative;}@media all and (max-width: 1024px){.kadence-column5339_6013c2-7b > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column5339_6013c2-7b > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column5339_6013c2-7b\"><div class=\"kt-inside-inner-col\"><style>.kb-image5339_89a563-77.kb-image-is-ratio-size, .kb-image5339_89a563-77 .kb-image-is-ratio-size{max-width:200px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_89a563-77.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_89a563-77 .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_89a563-77 figure{max-width:200px;}.kb-image5339_89a563-77 .image-is-svg, .kb-image5339_89a563-77 .image-is-svg img{width:100%;}.kb-image5339_89a563-77 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_89a563-77\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"610\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Colors-and-Fonts-Settings-e1762200927683.jpg\" alt=\"Colors and Fonts Settings\" class=\"kb-img wp-image-16050\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Colors-and-Fonts-Settings-e1762200927683.jpg 630w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Colors-and-Fonts-Settings-e1762200927683-300x290.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Colors-and-Fonts-Settings-e1762200927683-360x349.jpg 360w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n\n<style>.kadence-column5339_59006f-ca > .kt-inside-inner-col,.kadence-column5339_59006f-ca > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column5339_59006f-ca > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column5339_59006f-ca > .kt-inside-inner-col{flex-direction:column;}.kadence-column5339_59006f-ca > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column5339_59006f-ca > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column5339_59006f-ca{position:relative;}@media all and (max-width: 1024px){.kadence-column5339_59006f-ca > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column5339_59006f-ca > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column5339_59006f-ca\"><div class=\"kt-inside-inner-col\"><style>.kb-image5339_e1ae1e-cd.kb-image-is-ratio-size, .kb-image5339_e1ae1e-cd .kb-image-is-ratio-size{max-width:200px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_e1ae1e-cd.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_e1ae1e-cd .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_e1ae1e-cd figure{max-width:200px;}.kb-image5339_e1ae1e-cd .image-is-svg, .kb-image5339_e1ae1e-cd .image-is-svg img{width:100%;}.kb-image5339_e1ae1e-cd .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_e1ae1e-cd\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"642\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Button-Styles.jpg\" alt=\"Button Styles\" class=\"kb-img wp-image-16091\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Button-Styles.jpg 633w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Button-Styles-296x300.jpg 296w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Button-Styles-360x365.jpg 360w\" sizes=\"auto, (max-width: 633px) 100vw, 633px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n\n<style>.kadence-column5339_4ea9ec-15 > .kt-inside-inner-col,.kadence-column5339_4ea9ec-15 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column5339_4ea9ec-15 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column5339_4ea9ec-15 > .kt-inside-inner-col{flex-direction:column;}.kadence-column5339_4ea9ec-15 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column5339_4ea9ec-15 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column5339_4ea9ec-15{position:relative;}@media all and (max-width: 1024px){.kadence-column5339_4ea9ec-15 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column5339_4ea9ec-15 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column5339_4ea9ec-15\"><div class=\"kt-inside-inner-col\"><style>.kb-image5339_0bda5e-16.kb-image-is-ratio-size, .kb-image5339_0bda5e-16 .kb-image-is-ratio-size{max-width:200px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_0bda5e-16.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_0bda5e-16 .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_0bda5e-16 figure{max-width:200px;}.kb-image5339_0bda5e-16 .image-is-svg, .kb-image5339_0bda5e-16 .image-is-svg img{width:100%;}.kb-image5339_0bda5e-16 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_0bda5e-16\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"616\" height=\"682\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Example-Button-Styles.jpg\" alt=\"Example Button Styles\" class=\"kb-img wp-image-16092\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Example-Button-Styles.jpg 616w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Example-Button-Styles-271x300.jpg 271w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Example-Button-Styles-360x399.jpg 360w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<p>You can also use the Style Guide to view how the current Button Colors look. Additionally, you can click on each button type from the Style Guide to go directly to that button types settings.<\/p>\n\n\n<style>.kb-row-layout-id5339_df892d-66 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id5339_df892d-66 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id5339_df892d-66 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, calc(30% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)))minmax(0, calc(70% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)));}.kb-row-layout-id5339_df892d-66 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id5339_df892d-66 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id5339_df892d-66 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id5339_df892d-66 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column5339_e81039-9c > .kt-inside-inner-col,.kadence-column5339_e81039-9c > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column5339_e81039-9c > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column5339_e81039-9c > .kt-inside-inner-col{flex-direction:column;}.kadence-column5339_e81039-9c > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column5339_e81039-9c > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column5339_e81039-9c{position:relative;}@media all and (max-width: 1024px){.kadence-column5339_e81039-9c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column5339_e81039-9c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column5339_e81039-9c\"><div class=\"kt-inside-inner-col\"><style>.kb-image5339_5794cc-94 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image5339_5794cc-94 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"614\" height=\"512\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Icon.jpg\" alt=\"Style Guide Icon\" class=\"kb-img wp-image-16055\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Icon.jpg 614w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Icon-300x250.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Icon-360x300.jpg 360w\" sizes=\"auto, (max-width: 614px) 100vw, 614px\" \/><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column5339_339468-73 > .kt-inside-inner-col,.kadence-column5339_339468-73 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column5339_339468-73 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column5339_339468-73 > .kt-inside-inner-col{flex-direction:column;}.kadence-column5339_339468-73 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column5339_339468-73 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column5339_339468-73{position:relative;}@media all and (max-width: 1024px){.kadence-column5339_339468-73 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column5339_339468-73 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column5339_339468-73\"><div class=\"kt-inside-inner-col\"><style>.kb-image5339_d066ee-18 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_d066ee-18\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2322\" height=\"1672\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons.jpg\" alt=\"Style Guide Buttons\" class=\"kb-img wp-image-16093\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons.jpg 2322w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons-300x216.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons-1024x737.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons-768x553.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons-1536x1106.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons-2048x1475.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Style-Guide-Buttons-360x259.jpg 360w\" sizes=\"auto, (max-width: 2322px) 100vw, 2322px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5339_bd7aed-a0, .wp-block-kadence-advancedheading.kt-adv-heading5339_bd7aed-a0[data-kb-block=\"kb-adv-heading5339_bd7aed-a0\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5339_bd7aed-a0 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5339_bd7aed-a0[data-kb-block=\"kb-adv-heading5339_bd7aed-a0\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5339_bd7aed-a0 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5339_bd7aed-a0[data-kb-block=\"kb-adv-heading5339_bd7aed-a0\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 id=\"base-button-styles\" class=\"kt-adv-heading5339_bd7aed-a0 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading5339_bd7aed-a0\">Base Button Styles<\/h3>\n\n\n\n<p>The Base Button Styles will apply to buttons automatically. This is the standard\/base style of buttons on your website.<\/p>\n\n\n<style>.kb-image5339_bbbe37-92.kb-image-is-ratio-size, .kb-image5339_bbbe37-92 .kb-image-is-ratio-size{max-width:200px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_bbbe37-92.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_bbbe37-92 .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_bbbe37-92 figure{max-width:200px;}.kb-image5339_bbbe37-92 .image-is-svg, .kb-image5339_bbbe37-92 .image-is-svg img{width:100%;}.kb-image5339_bbbe37-92 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_bbbe37-92\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"648\" height=\"376\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Base-Button-Example.jpg\" alt=\"Base Button Example\" class=\"kb-img wp-image-16102\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Base-Button-Example.jpg 648w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Base-Button-Example-300x174.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Base-Button-Example-360x209.jpg 360w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/figure><\/div>\n\n\n<style>.kb-row-layout-id5339_1cf3e4-ba > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id5339_1cf3e4-ba > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id5339_1cf3e4-ba > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id5339_1cf3e4-ba > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id5339_1cf3e4-ba > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id5339_1cf3e4-ba > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id5339_1cf3e4-ba alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column5339_71a442-47 > .kt-inside-inner-col,.kadence-column5339_71a442-47 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column5339_71a442-47 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column5339_71a442-47 > .kt-inside-inner-col{flex-direction:column;}.kadence-column5339_71a442-47 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column5339_71a442-47 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column5339_71a442-47{position:relative;}@media all and (max-width: 1024px){.kadence-column5339_71a442-47 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column5339_71a442-47 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column5339_71a442-47\"><div class=\"kt-inside-inner-col\">\n<p><strong>Background Colors:<\/strong> Set the background color for both the normal and hover states of your button.<br><br><strong>Border Colors:<\/strong> Define the border color for the normal and hover states.<br><br><strong>Border:<\/strong> Add or customize a border for your button. Click the <strong>X icon<\/strong> to select a border style (such as solid, dashed, or none). Once a style is selected, you can set the <strong>Border Width<\/strong> in pixels.<br><br><strong>Border Radius:<\/strong> Control the roundness of your button corners. Increasing the radius creates more rounded buttons.<br><br><strong>Font:<\/strong> Adjust the typography for your button text, including font family, weight, and size.<br><br><strong>Padding:<\/strong> Set the spacing inside your button between the text and its edges. Padding can be customized for top, right, bottom, and left values.<br><br><strong>Button Shadow:<\/strong> Add depth to your button by adjusting the <strong>Shadow Color<\/strong>, <strong>X offset<\/strong>, <strong>Y offset<\/strong>, <strong>Blur<\/strong>, and <strong>Spread<\/strong> values.<br><br><strong>Hover Shadow:<\/strong> Define a different shadow style for the button\u2019s hover state.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column5339_d7b269-3b > .kt-inside-inner-col,.kadence-column5339_d7b269-3b > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column5339_d7b269-3b > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column5339_d7b269-3b > .kt-inside-inner-col{flex-direction:column;}.kadence-column5339_d7b269-3b > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column5339_d7b269-3b > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column5339_d7b269-3b{position:relative;}@media all and (max-width: 1024px){.kadence-column5339_d7b269-3b > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column5339_d7b269-3b > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column5339_d7b269-3b\"><div class=\"kt-inside-inner-col\"><style>.kb-image5339_21f4e3-d8.kb-image-is-ratio-size, .kb-image5339_21f4e3-d8 .kb-image-is-ratio-size{max-width:250px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_21f4e3-d8.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_21f4e3-d8 .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_21f4e3-d8 figure{max-width:250px;}.kb-image5339_21f4e3-d8 .image-is-svg, .kb-image5339_21f4e3-d8 .image-is-svg img{width:100%;}.kb-image5339_21f4e3-d8 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_21f4e3-d8\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"1592\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Base-Button-Styles.jpg\" alt=\"Base Button Styles\" class=\"kb-img wp-image-16097\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Base-Button-Styles.jpg 600w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Base-Button-Styles-113x300.jpg 113w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Base-Button-Styles-386x1024.jpg 386w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Base-Button-Styles-579x1536.jpg 579w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Base-Button-Styles-193x512.jpg 193w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5339_89c254-6a, .wp-block-kadence-advancedheading.kt-adv-heading5339_89c254-6a[data-kb-block=\"kb-adv-heading5339_89c254-6a\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5339_89c254-6a mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5339_89c254-6a[data-kb-block=\"kb-adv-heading5339_89c254-6a\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5339_89c254-6a img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5339_89c254-6a[data-kb-block=\"kb-adv-heading5339_89c254-6a\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 id=\"secondary-button\" class=\"kt-adv-heading5339_89c254-6a wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading5339_89c254-6a\">Secondary Button<\/h3>\n\n\n\n<p>The <strong>Secondary Button<\/strong> style provides an alternate design option for buttons across your site. It\u2019s useful when you need a supporting button that visually differs from your primary button. For example, when displaying two buttons side by side, such as \u201cLearn More\u201d and \u201cBuy Now.\u201d<br><br>This style helps create visual hierarchy by distinguishing primary actions from secondary ones while maintaining overall consistency with your site\u2019s design system.<\/p>\n\n\n<style>.kb-image5339_a04af6-a4.kb-image-is-ratio-size, .kb-image5339_a04af6-a4 .kb-image-is-ratio-size{max-width:200px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_a04af6-a4.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_a04af6-a4 .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_a04af6-a4 figure{max-width:200px;}.kb-image5339_a04af6-a4 .image-is-svg, .kb-image5339_a04af6-a4 .image-is-svg img{width:100%;}.kb-image5339_a04af6-a4 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_a04af6-a4\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"648\" height=\"372\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Secondary-Button-Example.jpg\" alt=\"Secondary Button Example\" class=\"kb-img wp-image-16103\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Secondary-Button-Example.jpg 648w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Secondary-Button-Example-300x172.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Secondary-Button-Example-360x207.jpg 360w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/figure><\/div>\n\n\n<style>.kb-row-layout-id5339_d83542-18 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id5339_d83542-18 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id5339_d83542-18 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id5339_d83542-18 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id5339_d83542-18 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id5339_d83542-18 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id5339_d83542-18 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column5339_1c57cb-41 > .kt-inside-inner-col,.kadence-column5339_1c57cb-41 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column5339_1c57cb-41 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column5339_1c57cb-41 > .kt-inside-inner-col{flex-direction:column;}.kadence-column5339_1c57cb-41 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column5339_1c57cb-41 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column5339_1c57cb-41{position:relative;}@media all and (max-width: 1024px){.kadence-column5339_1c57cb-41 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column5339_1c57cb-41 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column5339_1c57cb-41\"><div class=\"kt-inside-inner-col\">\n<p><strong>Text Colors: <\/strong>Set the text color for both the normal and hover states of your button.<br><br><strong>Background Colors:<\/strong> Set the background color for both the normal and hover states of your button.<br><br><strong>Border Colors:<\/strong> Define the border color for the normal and hover states.<br><br><strong>Border:<\/strong> Add or customize a border for your button. Click the <strong>X icon<\/strong> to select a border style (such as solid, dashed, or none). Once a style is selected, you can set the <strong>Border Width<\/strong> in pixels.<br><br><strong>Border Radius:<\/strong> Control the roundness of your button corners. Increasing the radius creates more rounded buttons.<br><br><strong>Font:<\/strong> Adjust the typography for your button text, including font family, weight, and size.<br><br><strong>Padding:<\/strong> Set the spacing inside your button between the text and its edges. Padding can be customized for top, right, bottom, and left values.<br><br><em><em>(These options must be enabled using the toggle.)<\/em><\/em><br><strong>Button Shadow:<\/strong> Add depth to your button by adjusting the <strong>Shadow Color<\/strong>, <strong>X offset<\/strong>, <strong>Y offset<\/strong>, <strong>Blur<\/strong>, and <strong>Spread<\/strong> values.<br><br><strong>Hover Shadow:<\/strong> Define a different shadow style for the button\u2019s hover state.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5339_533b01-2d, .wp-block-kadence-advancedheading.kt-adv-heading5339_533b01-2d[data-kb-block=\"kb-adv-heading5339_533b01-2d\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5339_533b01-2d mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5339_533b01-2d[data-kb-block=\"kb-adv-heading5339_533b01-2d\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5339_533b01-2d img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5339_533b01-2d[data-kb-block=\"kb-adv-heading5339_533b01-2d\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading5339_533b01-2d wp-block-kadence-advancedheading has-theme-palette-8-background-color has-background\" data-kb-block=\"kb-adv-heading5339_533b01-2d\"><strong>Note:<\/strong> By default, the Secondary Button inherits the Box Shadow from the Theme\u2019s Base Button. Disable the <strong>Disable <\/strong>Box<strong> <\/strong>Shadow toggle to apply unique shadow settings independent from the Base Button Shadow settings.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column5339_eef06b-5a > .kt-inside-inner-col,.kadence-column5339_eef06b-5a > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column5339_eef06b-5a > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column5339_eef06b-5a > .kt-inside-inner-col{flex-direction:column;}.kadence-column5339_eef06b-5a > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column5339_eef06b-5a > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column5339_eef06b-5a{position:relative;}@media all and (max-width: 1024px){.kadence-column5339_eef06b-5a > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column5339_eef06b-5a > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column5339_eef06b-5a\"><div class=\"kt-inside-inner-col\"><style>.kb-image5339_ed3d39-ce.kb-image-is-ratio-size, .kb-image5339_ed3d39-ce .kb-image-is-ratio-size{max-width:250px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_ed3d39-ce.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_ed3d39-ce .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_ed3d39-ce figure{max-width:250px;}.kb-image5339_ed3d39-ce .image-is-svg, .kb-image5339_ed3d39-ce .image-is-svg img{width:100%;}.kb-image5339_ed3d39-ce .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_ed3d39-ce\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"401\" height=\"1024\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Secondary-Button-401x1024.jpg\" alt=\"Secondary Button\" class=\"kb-img wp-image-16099\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Secondary-Button-401x1024.jpg 401w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Secondary-Button-118x300.jpg 118w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Secondary-Button-602x1536.jpg 602w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Secondary-Button-201x512.jpg 201w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Secondary-Button.jpg 612w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5339_fa574a-e0, .wp-block-kadence-advancedheading.kt-adv-heading5339_fa574a-e0[data-kb-block=\"kb-adv-heading5339_fa574a-e0\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5339_fa574a-e0 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5339_fa574a-e0[data-kb-block=\"kb-adv-heading5339_fa574a-e0\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5339_fa574a-e0 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5339_fa574a-e0[data-kb-block=\"kb-adv-heading5339_fa574a-e0\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 id=\"outline-button\" class=\"kt-adv-heading5339_fa574a-e0 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading5339_fa574a-e0\">Outline Button<\/h3>\n\n\n\n<p>The <strong>Outline Button<\/strong> style offers a more minimal design, featuring a transparent background with a defined border. This style is ideal for subtle or secondary actions where a full-color button might draw too much attention. This style doesn&#8217;t include a background color, as the background stays transparent.<\/p>\n\n\n<style>.kb-image5339_a06635-ae.kb-image-is-ratio-size, .kb-image5339_a06635-ae .kb-image-is-ratio-size{max-width:200px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_a06635-ae.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_a06635-ae .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_a06635-ae figure{max-width:200px;}.kb-image5339_a06635-ae .image-is-svg, .kb-image5339_a06635-ae .image-is-svg img{width:100%;}.kb-image5339_a06635-ae .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_a06635-ae\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"638\" height=\"358\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Outline-Button-Example.jpg\" alt=\"Outline Button Example\" class=\"kb-img wp-image-16104\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Outline-Button-Example.jpg 638w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Outline-Button-Example-300x168.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Outline-Button-Example-360x202.jpg 360w\" sizes=\"auto, (max-width: 638px) 100vw, 638px\" \/><\/figure><\/div>\n\n\n<style>.kb-row-layout-id5339_24298f-ac > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id5339_24298f-ac > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id5339_24298f-ac > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id5339_24298f-ac > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id5339_24298f-ac > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id5339_24298f-ac > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id5339_24298f-ac alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column5339_7b5124-4b > .kt-inside-inner-col,.kadence-column5339_7b5124-4b > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column5339_7b5124-4b > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column5339_7b5124-4b > .kt-inside-inner-col{flex-direction:column;}.kadence-column5339_7b5124-4b > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column5339_7b5124-4b > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column5339_7b5124-4b{position:relative;}@media all and (max-width: 1024px){.kadence-column5339_7b5124-4b > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column5339_7b5124-4b > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column5339_7b5124-4b\"><div class=\"kt-inside-inner-col\">\n<p><strong>Text Colors: <\/strong>Set the text color for both the normal and hover states of your button.<br><br><strong>Border Colors:<\/strong> Define the border color for the normal and hover states.<br><br><strong>Border:<\/strong> Add or customize a border for your button. Click the <strong>X icon<\/strong> to select a border style (such as solid, dashed, or none). Once a style is selected, you can set the <strong>Border Width<\/strong> in pixels.<br><br><strong>Border Radius:<\/strong> Control the roundness of your button corners. Increasing the radius creates more rounded buttons.<br><br><strong>Font:<\/strong> Adjust the typography for your button text, including font family, weight, and size.<br><br><strong>Padding:<\/strong> Set the spacing inside your button between the text and its edges. Padding can be customized for top, right, bottom, and left values.<br><br><em><em>(These options must be enabled using the toggle.)<\/em><\/em><br><strong>Button Shadow:<\/strong> Add depth to your button by adjusting the <strong>Shadow Color<\/strong>, <strong>X offset<\/strong>, <strong>Y offset<\/strong>, <strong>Blur<\/strong>, and <strong>Spread<\/strong> values.<br><br><strong>Hover Shadow:<\/strong> Define a different shadow style for the button\u2019s hover state.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column5339_dfac08-ae > .kt-inside-inner-col,.kadence-column5339_dfac08-ae > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column5339_dfac08-ae > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column5339_dfac08-ae > .kt-inside-inner-col{flex-direction:column;}.kadence-column5339_dfac08-ae > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column5339_dfac08-ae > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column5339_dfac08-ae{position:relative;}@media all and (max-width: 1024px){.kadence-column5339_dfac08-ae > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column5339_dfac08-ae > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column5339_dfac08-ae\"><div class=\"kt-inside-inner-col\"><style>.kb-image5339_0bb870-f6.kb-image-is-ratio-size, .kb-image5339_0bb870-f6 .kb-image-is-ratio-size{max-width:250px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_0bb870-f6.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_0bb870-f6 .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_0bb870-f6 figure{max-width:250px;}.kb-image5339_0bb870-f6 .image-is-svg, .kb-image5339_0bb870-f6 .image-is-svg img{width:100%;}.kb-image5339_0bb870-f6 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_0bb870-f6\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"441\" height=\"1024\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Outline-Button-441x1024.jpg\" alt=\"Outline Button\" class=\"kb-img wp-image-16100\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Outline-Button-441x1024.jpg 441w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Outline-Button-129x300.jpg 129w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Outline-Button-221x512.jpg 221w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Outline-Button.jpg 622w\" sizes=\"auto, (max-width: 441px) 100vw, 441px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5339_9acd81-b7, .wp-block-kadence-advancedheading.kt-adv-heading5339_9acd81-b7[data-kb-block=\"kb-adv-heading5339_9acd81-b7\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5339_9acd81-b7 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5339_9acd81-b7[data-kb-block=\"kb-adv-heading5339_9acd81-b7\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5339_9acd81-b7 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5339_9acd81-b7[data-kb-block=\"kb-adv-heading5339_9acd81-b7\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"kadence-theme-buttons\" class=\"kt-adv-heading5339_9acd81-b7 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading5339_9acd81-b7\">Kadence Theme Buttons<\/h2>\n\n\n\n<p>The <strong>Kadence Theme Header<\/strong> includes <strong>Button Header Items<\/strong>, which automatically use your <strong>Base Button Styles<\/strong> by default, ensuring they match the look and feel of standard buttons across your site.<br><br>When customizing <strong>Header Buttons<\/strong>, you can choose between the three global button style types: <strong>Base<\/strong>, <strong>Secondary<\/strong>, and <strong>Outline<\/strong>. This allows you to easily differentiate primary and secondary actions within your site\u2019s header while maintaining a consistent design system defined in your Customizer.<\/p>\n\n\n<style>.kb-row-layout-id5339_1c34ac-ba > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id5339_1c34ac-ba > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id5339_1c34ac-ba > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id5339_1c34ac-ba > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id5339_1c34ac-ba > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id5339_1c34ac-ba > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id5339_1c34ac-ba alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-row kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column5339_a36a09-5a > .kt-inside-inner-col,.kadence-column5339_a36a09-5a > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column5339_a36a09-5a > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column5339_a36a09-5a > .kt-inside-inner-col{flex-direction:column;}.kadence-column5339_a36a09-5a > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column5339_a36a09-5a > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column5339_a36a09-5a{position:relative;}@media all and (max-width: 1024px){.kadence-column5339_a36a09-5a > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column5339_a36a09-5a > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column5339_a36a09-5a\"><div class=\"kt-inside-inner-col\"><style>.kb-image5339_d7a8d0-45.kb-image-is-ratio-size, .kb-image5339_d7a8d0-45 .kb-image-is-ratio-size{max-width:700px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_d7a8d0-45.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_d7a8d0-45 .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_d7a8d0-45 figure{max-width:700px;}.kb-image5339_d7a8d0-45 .image-is-svg, .kb-image5339_d7a8d0-45 .image-is-svg img{width:100%;}.kb-image5339_d7a8d0-45 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_d7a8d0-45\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2330\" height=\"1350\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Theme-Header-Button.jpg\" alt=\"Theme Header Button\" class=\"kb-img wp-image-16105\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Theme-Header-Button.jpg 2330w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Theme-Header-Button-300x174.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Theme-Header-Button-1024x593.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Theme-Header-Button-768x445.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Theme-Header-Button-1536x890.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Theme-Header-Button-2048x1187.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Theme-Header-Button-360x209.jpg 360w\" sizes=\"auto, (max-width: 2330px) 100vw, 2330px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n\n<style>.kadence-column5339_92d4e2-ce > .kt-inside-inner-col,.kadence-column5339_92d4e2-ce > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column5339_92d4e2-ce > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column5339_92d4e2-ce > .kt-inside-inner-col{flex-direction:column;}.kadence-column5339_92d4e2-ce > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column5339_92d4e2-ce > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column5339_92d4e2-ce{position:relative;}@media all and (max-width: 1024px){.kadence-column5339_92d4e2-ce > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column5339_92d4e2-ce > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column5339_92d4e2-ce\"><div class=\"kt-inside-inner-col\"><style>.kb-image5339_643835-fb.kb-image-is-ratio-size, .kb-image5339_643835-fb .kb-image-is-ratio-size{max-width:700px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_643835-fb.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_643835-fb .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_643835-fb figure{max-width:700px;}.kb-image5339_643835-fb .image-is-svg, .kb-image5339_643835-fb .image-is-svg img{width:100%;}.kb-image5339_643835-fb .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_643835-fb\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1574\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/header-Button-Styles-scaled.jpg\" alt=\"header Button Styles\" class=\"kb-img wp-image-16106\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/header-Button-Styles-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/header-Button-Styles-300x184.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/header-Button-Styles-1024x630.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/header-Button-Styles-768x472.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/header-Button-Styles-1536x944.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/header-Button-Styles-2048x1259.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/header-Button-Styles-360x221.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5339_3bb9c4-bf, .wp-block-kadence-advancedheading.kt-adv-heading5339_3bb9c4-bf[data-kb-block=\"kb-adv-heading5339_3bb9c4-bf\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5339_3bb9c4-bf mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5339_3bb9c4-bf[data-kb-block=\"kb-adv-heading5339_3bb9c4-bf\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5339_3bb9c4-bf img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5339_3bb9c4-bf[data-kb-block=\"kb-adv-heading5339_3bb9c4-bf\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"kadence-advanced-buttons\" class=\"kt-adv-heading5339_3bb9c4-bf wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading5339_3bb9c4-bf\">Kadence Advanced Buttons<\/h2>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5339_84c655-26, .wp-block-kadence-advancedheading.kt-adv-heading5339_84c655-26[data-kb-block=\"kb-adv-heading5339_84c655-26\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5339_84c655-26 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5339_84c655-26[data-kb-block=\"kb-adv-heading5339_84c655-26\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5339_84c655-26 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5339_84c655-26[data-kb-block=\"kb-adv-heading5339_84c655-26\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading5339_84c655-26 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading5339_84c655-26\"><strong>Advanced Buttons<\/strong> in the Kadence Blocks plugin automatically inherit the <strong>Base Button Styles<\/strong> from the Kadence Theme, provided the individual block settings have not been modified. This ensures that your button blocks remain visually consistent with the rest of your site.<br><br>When editing an <strong>Advanced Button Block<\/strong>, go to <strong>Block Settings \u2192 General Tab<\/strong> and locate the <strong>Button Inherit Styles<\/strong> option. Here, you can choose between:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fill<\/strong> \u2013 Uses a solid button style. The <em>Text Color <\/em>and <em>Background Color <\/em>are pulled from the Kadence Base Button Styles. Other customizations, such as borders, are not applied from the Base Styles and will instead use the settings defined in the Advanced Button Block<\/li>\n\n\n\n<li><strong>Outline<\/strong> \u2013 Inherits the Outline Button Styles from the Kadence Theme.<\/li>\n\n\n\n<li><strong>Theme Base<\/strong> \u2013 Inherits the Base Button Styles from the Kadence Theme.<\/li>\n\n\n\n<li><strong>Theme Secondary<\/strong> \u2013 Inherits the Secondary Button Styles from the Kadence Theme.<\/li>\n<\/ul>\n\n\n\n<p>When using <strong>Theme Styles<\/strong>, you can still adjust individual block settings, such as background color, typography, or padding. Changing one of these settings will only override that specific property. It won\u2019t remove or reset the rest of the inherited Theme Styles.<\/p>\n\n\n<style>.kb-image5339_dfd97f-70.kb-image-is-ratio-size, .kb-image5339_dfd97f-70 .kb-image-is-ratio-size{max-width:400px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_dfd97f-70.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_dfd97f-70 .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_dfd97f-70 figure{max-width:400px;}.kb-image5339_dfd97f-70 .image-is-svg, .kb-image5339_dfd97f-70 .image-is-svg img{width:100%;}.kb-image5339_dfd97f-70 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_dfd97f-70\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1414\" height=\"1294\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Advanced-Button-Styles.jpg\" alt=\"Advanced Button Styles\" class=\"kb-img wp-image-16108\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Advanced-Button-Styles.jpg 1414w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Advanced-Button-Styles-300x275.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Advanced-Button-Styles-1024x937.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Advanced-Button-Styles-768x703.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Advanced-Button-Styles-360x329.jpg 360w\" sizes=\"auto, (max-width: 1414px) 100vw, 1414px\" \/><\/figure><\/div>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5339_204771-18, .wp-block-kadence-advancedheading.kt-adv-heading5339_204771-18[data-kb-block=\"kb-adv-heading5339_204771-18\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5339_204771-18 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5339_204771-18[data-kb-block=\"kb-adv-heading5339_204771-18\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5339_204771-18 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5339_204771-18[data-kb-block=\"kb-adv-heading5339_204771-18\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"core-button-blocks\" class=\"kt-adv-heading5339_204771-18 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading5339_204771-18\">Core Block Buttons<\/h2>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5339_42d4ff-11, .wp-block-kadence-advancedheading.kt-adv-heading5339_42d4ff-11[data-kb-block=\"kb-adv-heading5339_42d4ff-11\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5339_42d4ff-11 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5339_42d4ff-11[data-kb-block=\"kb-adv-heading5339_42d4ff-11\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5339_42d4ff-11 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5339_42d4ff-11[data-kb-block=\"kb-adv-heading5339_42d4ff-11\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading5339_42d4ff-11 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading5339_42d4ff-11\"><strong>WordPress Core Buttons<\/strong> automatically inherit the <strong>Base Button Styles<\/strong> from the Kadence Theme, as long as the individual block settings have not been customized.<br><br>When editing a Core Button Block, you\u2019ll find two tabs for settings in the block toolbar. Click the <strong>Styles icon<\/strong> (half black \/ half transparent circle) to switch between available button styles. The available options in Core Blocks consist of the Base Styles or the Outline Styles.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fill<\/strong> \u2013 Uses a solid button style. The <em>Text Color <\/em>and <em>Background Color <\/em>are pulled from the Kadence Base Button Styles. Other customizations, such as borders, are not applied from the Base Styles and will instead use the settings defined in the Advanced Button Block<\/li>\n\n\n\n<li><strong>Outline<\/strong> \u2013 Inherits the Outline Button Styles from the Kadence Theme.<\/li>\n<\/ul>\n\n\n<style>.kb-image5339_6c8ff9-09.kb-image-is-ratio-size, .kb-image5339_6c8ff9-09 .kb-image-is-ratio-size{max-width:400px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_6c8ff9-09.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_6c8ff9-09 .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_6c8ff9-09 figure{max-width:400px;}.kb-image5339_6c8ff9-09 .image-is-svg, .kb-image5339_6c8ff9-09 .image-is-svg img{width:100%;}.kb-image5339_6c8ff9-09 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_6c8ff9-09\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"805\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Core-Button-Styles-1024x805.jpg\" alt=\"Core Button Styles\" class=\"kb-img wp-image-16107\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Core-Button-Styles-1024x805.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Core-Button-Styles-300x236.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Core-Button-Styles-768x603.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Core-Button-Styles-360x283.jpg 360w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Core-Button-Styles.jpg 1283w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5339_7ddd1a-aa, .wp-block-kadence-advancedheading.kt-adv-heading5339_7ddd1a-aa[data-kb-block=\"kb-adv-heading5339_7ddd1a-aa\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5339_7ddd1a-aa mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5339_7ddd1a-aa[data-kb-block=\"kb-adv-heading5339_7ddd1a-aa\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5339_7ddd1a-aa img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5339_7ddd1a-aa[data-kb-block=\"kb-adv-heading5339_7ddd1a-aa\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading5339_7ddd1a-aa wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading5339_7ddd1a-aa\">Button Color opacity<\/h2>\n\n\n\n<p>If you want the color to be more see-through, drag the circle on the second line under the color picker.<br>You can also type a number (like&nbsp;<strong>0.5<\/strong>) in the \u201cA\u201d box to set the opacity;&nbsp;<strong>0.5 means 50% see-through<\/strong>.<\/p>\n\n\n<style>.kb-image5339_03ad84-20.kb-image-is-ratio-size, .kb-image5339_03ad84-20 .kb-image-is-ratio-size{max-width:500px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_03ad84-20.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image5339_03ad84-20 .kb-image-is-ratio-size{align-self:unset;}.kb-image5339_03ad84-20 figure{max-width:500px;}.kb-image5339_03ad84-20 .image-is-svg, .kb-image5339_03ad84-20 .image-is-svg img{width:100%;}.kb-image5339_03ad84-20 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5339_03ad84-20\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"628\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Color-Opacity.gif\" alt=\"Color Opacity\" class=\"kb-img wp-image-16115\" \/><\/figure><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"359\" height=\"1024\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/05\/Block-Styles-359x1024.jpg\" alt=\"\" class=\"wp-image-6826\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/05\/Block-Styles-359x1024.jpg 359w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/05\/Block-Styles-105x300.jpg 105w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/05\/Block-Styles-179x512.jpg 179w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/05\/Block-Styles-538x1536.jpg 538w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2023\/05\/Block-Styles.jpg 612w\" sizes=\"auto, (max-width: 359px) 100vw, 359px\" \/><\/figure><\/div>\n\n\n<p><strong>Text Colors &#8211; <\/strong>The <em>Text Colors<\/em> setting allows you to set an initial color and hover color for your button text.<br><strong>Background Colors &#8211; <\/strong>The <em>Background Colors<\/em> setting allows you to set an initial color and hover color for your button background.<br><strong>Border Colors &#8211;<\/strong> The <em>Borders Colors <\/em>setting allows you to set an initial color and hover color for your button border.<br><strong>Border &#8211; <\/strong>The <em>Border<\/em> setting allows you to set and use a border on your buttons.<br><strong>Border Radius &#8211; <\/strong> The <em>Border<\/em> <em>Radius<\/em> setting allows you to set the border radius on your buttons.<br><strong>Font &#8211; <\/strong>The <em>Font<\/em> setting allows you to specify a font, font style, and font size to your button.<br><strong>Padding <\/strong>&#8211; The <em>Padding<\/em> setting allows you to add padding to your button for desktop, tablet, and mobile devices.<br><strong>Button Shadow &#8211; <\/strong>The Button Shadow setting allows you to set a shadow around your button.<br><strong>Button Shadow Hover State &#8211; <\/strong>The <em>Button Shadow Hover State<\/em> setting allows you to set a hover shadow around your button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Color opacity<\/h2>\n\n\n\n<p>If you want the color to be more see-through, drag the circle on the second line under the color picker.<br>You can also type a number (like <strong>0.5<\/strong>) in the &#8220;A&#8221; box to set the opacity \u2014 <strong>0.5 means 50% see-through<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"435\" height=\"851\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Zight-Recording-2025-10-01-at-12.12.36-PM.gif\" alt=\"\" class=\"wp-image-15248\" \/><\/figure><\/div>","protected":false},"excerpt":{"rendered":"<p>The Kadence Theme includes a global Button Styles system, allowing you to define and manage how buttons appear across your site. These settings apply to both theme-based buttons and buttons added via blocks, ensuring a consistent design. The Button Styles in the Customizer replace the need to manually style individual buttons, while giving you global&#8230;<\/p>\n","protected":false},"author":1265,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[406],"doc_tag":[],"knowledge_base":[6],"class_list":["post-5339","docs","type-docs","status-publish","hentry","doc_category-theme-settings","knowledge_base-kadence-theme"],"year_month":"2026-04","word_count":1479,"total_views":"9434","reactions":{"happy":"4","normal":"0","sad":"4"},"author_info":{"display_name":"Ben Ritner","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/britner\/"},"doc_category_info":[{"term_name":"Customize Settings","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/theme-settings\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Theme","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/","term_slug":"kadence-theme"}],"knowledge_base_slug":["kadence-theme"],"taxonomy_info":{"doc_category":[{"value":406,"label":"Customize Settings"}],"knowledge_base":[{"value":6,"label":"Kadence Theme"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/5339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/1265"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=5339"}],"version-history":[{"count":7,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/5339\/revisions"}],"predecessor-version":[{"id":16226,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/5339\/revisions\/16226"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=5339"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=5339"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=5339"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=5339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}