How to Style Buttons in Beaver Builder Theme

Last updated October 10, 2016 · Puneet

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 is a well-built theme and I love it’s performance, clean code and theme options. Unlike other themes that add custom CSS to <head> section BB theme compiles that into a CSS file and keeps the code clean.

Beaver Builder Theme has essential options to adjust the layout and color scheme. I have seen a lot of users are requesting more options for headers and styling controls. One of such feature requests is styling the buttons in BB theme.

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 newer version of the theme. But, for now, here’s a tiny CSS snippet that you can use for styling the buttons.

Creating Flat Button style
flat-button

Round Corner Transparent Button Style

round-transparent-button

 

You can paste the above code in your Child theme or BB Theme’s Customizer > Code > CSS Code Section.

I have added comments to HEX color values which you can change to match with your styling

A few more interesting posts →

Leave a Comment





PowerPack Beaver Addons

PowerPack Beaver Addons

Start creating beautiful websites with 50+ modules and 350+ templates for Beaver Builder.

Join 6000+ Subscribers.

Get latest Beaver Builder Tips and Updates in your Inbox. 

Please enter your name.
Please enter a valid email address.
Something went wrong. Please check your entries and try again.