Mouseover Buttons


I’m using the BeaverBuilder Pro Plugin in addition to the BeaverBuilder theme. I would like to know how I can define a mouseover for my buttons and CTA’s. Ok, I can do that manually for every single button but is there a more advanced and easy way? I would like to define 1 or 2 different buttons with a mouseover and clicked statement and want to use them all over my site.

Any suggestions?

Thanks in advance

PS: It would be great to see a dropdown for example where you can chose from one of your predesigned buttons.

Hey Bastian,

The only way I can think of to achieve that is to use custom CSS. Under the Advanced tab on the module, you’ll notice there’s a Class field. You can place there any classname you like, e.g., redhover. Then you can assign CSS to that class name so anytime you want to use that CSS set, you can just add redhover class to the CTA module. You can use the CSS snippet below.

.redhover .fl-module-content .fl-cta-button a.fl-button:hover {
  background: red;

I think the guys are working on a module template but I’m not sure. Gonna ask them about that.

Hope this helps!


Hey Bastian,

Ben is correct in that there isn’t a global way of doing that without custom CSS at the moment. We do have plans of creating what we are calling “Linked Modules or Templates” to where you could create BB content that can be used and updated globally. We are looking at summer for that dev work and hope to have it released a bit later this year. Stay tuned, it’s going to be an exciting year for BB!