Hi, I want to create the prolifically trendy transparent button effect. I can easily do this with a css override in my stylesheet but i’m wondering if maybe I’m missing something in the builder plugin.
I notice the color picker doesn’t seem to allow for transparent. Is this possible without using my stylesheet?
Hi Mikiah,
Thanks for getting in touch! You are correct in that this isn’t currently possible with the builder, but it is great feedback and something we have discussed adding in the future. For now, you would need to do this using custom CSS as you mention. Thanks again!
Best,
Billy
hi M33…
i need to do that as well.
can you tell me how yo easily added a transparent button effect with a css override
thanks
Jason
Hey Jason,
This may help in getting you started. This is how we accomplish the ‘Demo’ button on our homepage. You’ll just need to change the CSS classes to whatever you are trying to accomplish this on. Hope it helps!
.fl-herobar .fl-button-demo a.fl-button {
border: 2px solid rgba(255,255,255,0.6);
background: rgba(255,255,255,0.1);
padding: 15px 20px 12px;
}
.fl-herobar .fl-button-demo a.fl-button:hover {
background: rgba(255,255,255,0.2);
}
Best,
Billy
Hi Billy, Thanks, i appreciate your help.
unfortunately CSS and I are not the best of friends … (yet!)
So excuse my css ignorance but if I’m using the button module do I add the code you gave me in the button settings - advanced tab – css class field?
cheers
jason
Hey Jason,
No, you would need to add the CSS code to the customizer in the code area that is part of the theme. Or, in your theme stylesheet if not using the BB theme. The first part of the CSS snippets are what is called a class - those are specific to our site so I would suggest just using something like .fl-custom-button for your class. So, the only thing that needs to go into the advanced tab of the button module after putting the CSS in the theme in this case is fl-custom-button. Hope that helps!
Best,
Billy
Hey guys,
I just posted a video on how to do this with CSS Hero in Beaver Builder and also how to add the CSS to one Beaver Builder button only.
http://dynamikbeaver.com/blog/how-to-create-transparent-buttons-in-beaver-builder/
Hope it helps:)
You rock Colin, thanks!
Hey Colin… ,
You are the Beaver-Geeezzaa! You are my 2nd best mate Now!
thank you!
I don’t have CSS hero so I’ll have to use your Discount voucher to buy it…
YEAH!! Discount… now you’re my best mate…lol
Btw, I’m using a Genesis-DWB-Beaver builder set up. And now most probably CSS Hero…
So does the code go somewhere else in the DWB settings rather than where you mentioned in your video?
The reason I jumped ship from Themforest’s Avada theme was I wanted faster, cleaner and friendly coded website. (+ another 50 reasons)
Just a thought, but wont they all (CSS Hero, DWB and Beaver builder) conflict and effect the site if your changing the CSS all in different places?
Cheers Jason
Mr Young, thank you, thank you too… Now your my 2nd best mate…lol
Thanks very much Jason…You made my day:)
The code works the same way in DWB. You just need to go to Genesis > Dynamik Custom > CSS - Then paste the CSS code in there.
Before you go off and buy CSS Hero, I want you to know that right now it does not automatically detect the Beaver Builder Page Builder elements if you’re using Beaver Builder with a Genesis child theme like DWB. The reason is because CSS Hero recognizes Genesis themes as “Hero Ready” which disables the “Rocket Mode” feature needed to detect the Beaver Builder elements.
CSS Hero will still work with BB and DWB, but you’ll just have to manually add the Beaver Builder elements to CSS Hero for now. I will record a video this weekend to show you how to manually add the Beaver Builder elements to CSS Hero, but I do know the CSS Hero guys are working on getting the Beaver Builder elements added to CSS Hero, so it won’t be long before they are automatically detected.
As for conflicts, there are none. DWB, Beaver Builder and CSS Hero all play very well together. They’re all extremely well coded and because CSS works in a hierarchical way, the last style sheet loaded wins. So for example: the DWB style sheet loads first then Beaver Builder inherits the main styles from DWB before loading it’s own style sheet, then, last but not least, CSS Hero loads it’s style sheet. If the same element is two of the style sheets, the last one usually wins. I say usually, because there are a couple of exceptions like using an !important modifier that over-ride the rules.
I typically copy all the CSS created by CSS Hero and paste it into the Custom CSS area of DWB, then disable CSS Hero when the site is finished. This is not really necessary (CSS Hero does not slow things down) but, I like to have all my custom CSS in one place and it stops clients messing with CSS Hero if they’re logged in.
There’ll be a few more videos than usual this week so I can catch up a bit. I’ll make sure there is one on using DWB with CSS Hero for you.
Cheers for now,
Colin
Welcome back Colin and thanks for the vid - great stuff 
Cheers, Dave
Hey Beaver-Geeezzaa the man with the paddle-shaped tail and webbed hind feet.
You are God!!!
Thank You!
Hi Collin…
I trust all is well…
im just wondering if you had the chance at the weekend to do the video on manually adding the Beaver Builder elements to CSS Hero.
regards
jason
Hey Jason,
The weekend on got away on me, but thanks to your nudge, I’ve just posted the video on the Dynamik Beaver site. Here is the post:
http://dynamikbeaver.com/blog/how-to-manually-add-beaver-builder-elements-to-css-hero/
If you have any questions about it, please post them as a comment on that post. That way we’re not messing up the Beaver Builder forum.
Cheers for now,
Colin
That’s excellent Colin… Thank you!
.
Could someone point out what idiotic mistake I’ve made here - http://monagrace.net
My class is .meditation-button. I’m using DWB. I added Colin’s code. I don’t want the transparent button universal.
Yes, I know there’s 2 buttons there. So this is a second quandary. On 13" laptop that call out is centered vertically. On 21.5" desktop it is not. Hence, my trying to use the button instead of the call out to see if I can fix that problem. I’ll take a solution for either. Thanks.
Will there ever be a transparent button option like the call out has? That would be nice;)