{"id":726,"date":"2026-06-09T05:22:46","date_gmt":"2026-06-09T05:22:46","guid":{"rendered":"https:\/\/docs.wpinterface.com\/?p=726"},"modified":"2026-06-10T05:22:56","modified_gmt":"2026-06-10T05:22:56","slug":"global-buttons-configuration-guide","status":"publish","type":"post","link":"https:\/\/docs.wpinterface.com\/global-buttons-configuration-guide\/","title":{"rendered":"Global Buttons Configuration Guide"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Accessing Button Settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To manage your global button styles, navigate to <strong>Appearance \u2192 Customize<\/strong> in your WordPress dashboard, then go to <strong>General \u2192 Buttons<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1. Primary Button<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Primary Button style is used for the most important calls to action on your site (e.g., &#8220;Buy Now&#8221;, &#8220;Submit&#8221;, &#8220;Read More&#8221;).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Expand the <strong>Primary Button<\/strong> section to configure:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Colors<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background Color:<\/strong> The resting background color. <em>(If left empty, the theme&#8217;s global Accent Color is used automatically).<\/em><\/li>\n\n\n\n<li><strong>Hover Background Color:<\/strong> The color the button changes to when hovered. <em>(If left empty, a lightened version of your Accent Color is used).<\/em><\/li>\n\n\n\n<li><strong>Text Color:<\/strong> The color of the text inside the button (usually White or Black, depending on the background).<\/li>\n\n\n\n<li><strong>Hover Text Color:<\/strong> The text color on hover.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Shape &amp; Borders<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Border Width:<\/strong> If you want your button to have a visible border, set the width here (in pixels).<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> This controls how round the corners of your button are.<\/li>\n\n\n\n<li>Set all four corners to <code>0<\/code> for sharp, square buttons.<\/li>\n\n\n\n<li>Set them to a low number (e.g., <code>4px<\/code>) for slightly softened corners.<\/li>\n\n\n\n<li>Set them to a high number (e.g., <code>50px<\/code>) for completely rounded, &#8220;pill-shaped&#8221; buttons.<\/li>\n\n\n\n<li><strong>Border Color &amp; Hover Border Color:<\/strong> If you set a Border Width greater than 0, define the colors of that border here.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Typography<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the <strong>Typography<\/strong> panel to define the specific font family, weight, text-transform (e.g., ALL CAPS), and letter-spacing for the text inside your primary buttons.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2. Secondary Button<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Secondary Buttons are used for alternative actions (e.g., &#8220;Learn More&#8221;, &#8220;Cancel&#8221;) 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Expand the <strong>Secondary Button<\/strong> section to configure:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Colors:<\/strong> Set the Background, Hover Background, Text, and Hover Text colors.<\/li>\n\n\n\n<li><strong>Shape &amp; Borders:<\/strong> Define the Border Width, Radius, and Colors exactly as you did for the Primary button.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Set the font styling for secondary buttons.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3. Text Button<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Text Buttons are used for subtle links that function as buttons but look more like standard text with an icon or specific styling.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Expand the <strong>Text Button<\/strong> section to configure:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text Color:<\/strong> The default color of the text.<\/li>\n\n\n\n<li><strong>Hover Text Color:<\/strong> The color on hover. <em>(If left empty, the global Accent Color is used).<\/em><\/li>\n\n\n\n<li><strong>Typography:<\/strong> Set the specific font family, weight, and sizing for text buttons.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Saving Your Changes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once your button styles are perfectly aligned with your brand&#8217;s aesthetic, click the blue <strong>Publish<\/strong> button at the top of the Customizer to apply the changes across your entire site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 \u2192 Customize in your WordPress dashboard, then go &hellip; <a href=\"https:\/\/docs.wpinterface.com\/global-buttons-configuration-guide\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Global Buttons Configuration Guide<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[21],"class_list":["post-726","post","type-post","status-publish","format-standard","hentry","category-general","tag-business-interface"],"_links":{"self":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts\/726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/comments?post=726"}],"version-history":[{"count":1,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts\/726\/revisions"}],"predecessor-version":[{"id":727,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts\/726\/revisions\/727"}],"wp:attachment":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/media?parent=726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/categories?post=726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/tags?post=726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}