{"id":4903,"date":"2016-09-10T02:55:13","date_gmt":"2016-09-10T09:55:13","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=4903"},"modified":"2016-10-10T12:01:28","modified_gmt":"2016-10-10T19:01:28","slug":"style-buttons-beaver-builder-theme","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/style-buttons-beaver-builder-theme\/","title":{"rendered":"How to Style Buttons in Beaver Builder Theme"},"content":{"rendered":"<p>Every time, I start working with any theme or plugin, I prefer to look under the hood. As a developer, I look for clean and documented code. This gives me an extra confidence in using the theme or plugin.<\/p>\n<p><a href=\"https:\/\/wpbeaveraddons.com\/go\/beaverbuilder\/\">Beaver Builder Theme<\/a>\u00a0is a well-built theme and I\u00a0love\u00a0it&#8217;s performance, clean code and theme options. Unlike other themes that add custom CSS to &lt;head&gt; section BB theme compiles that into a CSS file and keeps the code clean.<\/p>\n<p>Beaver Builder Theme has essential options to adjust the layout and color scheme. I have seen a\u00a0lot of users are requesting more options for headers and styling controls. One of such feature requests is styling the buttons in BB theme.<\/p>\n<p>At the moment, Beaver Builder Theme uses accent color and link color to style the buttons. There will be options to control this in the\u00a0newer version of the theme. But, for now, here&#8217;s a tiny CSS snippet that you can use\u00a0for styling the buttons.<\/p>\n<h3>Creating Flat Button style<br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-4905\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/09\/flat-button.png\" alt=\"flat-button\" width=\"161\" height=\"57\" \/><\/h3>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/psahalot\/188f3b75d28341dd6d9dff63ecd1a067.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/psahalot\/188f3b75d28341dd6d9dff63ecd1a067\" target=\"_blank\" rel=\"noopener\">Gist<\/a>.<\/noscript><\/div>\n<h3>Round\u00a0Corner Transparent Button Style<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-4906\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/09\/round-transparent-button.png\" alt=\"round-transparent-button\" width=\"158\" height=\"50\" \/><\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/psahalot\/db25828ca5156ebe2c6e0c01a09b2c39.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/psahalot\/db25828ca5156ebe2c6e0c01a09b2c39\" target=\"_blank\" rel=\"noopener\">Gist<\/a>.<\/noscript><\/div>\n<p>&nbsp;<\/p>\n<p>You can paste the above code in your Child theme or BB Theme&#8217;s Customizer &gt; Code &gt; CSS Code Section.<\/p>\n<p>I have added comments to HEX color values which you can change to match with your styling<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every time, I start working with any theme or plugin, I prefer to look under the hood. As a developer, I look for clean and documented code. This gives me an extra confidence in using the theme or plugin. Beaver Builder Theme\u00a0is a well-built theme and I\u00a0love\u00a0it&#8217;s performance, clean code and theme options. Unlike other&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[12,27],"tags":[25],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/4903"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=4903"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/4903\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=4903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=4903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=4903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}