BoldGrid is completely customizable and allows you to change the button style<\/strong> used on your WordPress website. This guide will show you how to override some of the various rules that make up the button style on your current Inspiration.<\/p>\n

The buttons are usually styled with a few key CSS rules, such as box-shadow and border-radius, and these shape adjustments are applied to the button class “button-primary.”<\/p>\n

Adding !important<\/b> to your CSS rule will give the targeted element style you set precedence over any additional styling that targets the same element.<\/div>\nThis guide shows you how to change the shape of the buttons. To change the color of your buttons, you can use the Customizer Palette controls<\/a>. The following is a screenshot of the button style that we will be changing in this tutorial. \n<\/a><\/p>\n Adding custom CSS to change your BoldGrid buttons<\/h2>\nTo change the shapes of your buttons, you can apply a few simple CSS rules. The following tutorial will explain the process of adding your custom styles<\/strong>.<\/p>\n\n<\/a>Open the Customizer\n<\/div>\n<\/li>\n <\/a>Go to Advanced\n<\/div>\n<\/li>\n <\/a>Go to Custom JS & CSS\n<\/div>\n<\/li>\n <\/a>Under Custom Theme CSS<\/strong>, Go to Open Editor\n<\/div>\n<\/li>\n <\/a>Add your CSS rules. The buttons use the class button-primary for shape, and the color is controlled by the palette. Below is an example of how you can change the style using a rule override for button-primary, and button-primary:hover.\n.button-primary {\r\n border-radius: 50px !important;\r\n box-shadow: 10px 20px #000 !important;\r\n}\r\n.button-primary:hover {\r\n border-radius: 5px !important;\r\n}<\/pre>\n<\/div>\n<\/li>\n<\/a>Exit the CSS editor using the X in the top right corner\n<\/div>\n<\/li>\n <\/a>Save and Publish your changes\n<\/div>\n<\/li>\n<\/ol>\n<\/div>\nThis is the final look of the button that we have changed in this guide. \n<\/a><\/p>\n Congratulations! You now know how to change the style your buttons use. For more Customization options<\/a>, it is recommended that you also view our guide regarding the Advanced Options available<\/a>.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":" BoldGrid is completely customizable and allows you to change the button style used on your WordPress website. This guide will show you how to override some of the various rules that make up the button style on your current Inspiration. The buttons are usually styled with a few key CSS rules, such as box-shadow and […]<\/p>\n","protected":false},"author":529,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"How to Change Button Styles using the Customizer","bgseo_description":"This guide will show you how to override some of the various CSS rules that make up the button style on your current BoldGrid Inspiration.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[764],"tags":[],"class_list":["post-8814","post","type-post","status-publish","format-standard","hentry","category-boldgrid-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/8814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/529"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=8814"}],"version-history":[{"count":18,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/8814\/revisions"}],"predecessor-version":[{"id":28662,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/8814\/revisions\/28662"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=8814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=8814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=8814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}