Color Settings and Animation For Buttons

Beaver Builder
1

Hi. I’m using Dynamik Website Builder with BB. I’m trying to create a button that is color filled and then when hovered over, has a transparent inside and a colored border and another button that works vice versa (Transparent inside with colored border and then on hover it fills completely with color.

I don’t see any button settings in BB that allow this. I’ve tried several ways.

2

Hey Kassim,

I’ve attached some screenshots for your reference, try to follow it and apply your adjustments later. You’ll need to apply custom CSS for the border color on button hover. You can also refer to this KB article on how to create Transparent Button With Solid Color Hover.

Create a button and style it accordingly.
http://imgur.com/Ef6aDYO

Apply a custom class name for the button.
http://imgur.com/0Ngmxna

Use the Custom CSS code below to apply the border color on button hover.

.fl-builder-content .fl-module-button.cb-hover a.fl-button:hover {    
    border: 2px solid #000;
}

That’s it. Let us know how it goes.

Thanks!

KC

3

Ok thanks this works, but not for callout buttons. What is the CSS for that?

4

Hey Kassim,

That CSS snippet is for the Button Modules only, it won’t work on Callout Modules. Create a Callout Module and apply the same settings as shown on the attached screenshot below. Then use the CSS code below and adjust it to your needs. Apply a custom class name for the Callout Module and replace “cc-module”. Let us know how it goes.

http://imgur.com/J6m4zPK

.fl-builder-content .fl-module-callout.cc-module a.fl-button:hover {    
    border: 2px solid #000;	
}

Thanks!

KC

5

What is the CCS needed to apply the transparent button with solid color hover to the subscribe form button?

6

Nevermind. I have it already. :slight_smile:

7

Glad you figured it out! Have fun! :slight_smile:

Ben