Transparent Button isn't transparent

Beaver Builder
1

I’m trying to make the buttons in the header start off as transparent and then on hover go to white (using code you guys provided). But the buttons always have a bg of #fafafa and then go transparent on hover, disregarding my css. I can’t figure out what is going wrong.

https://datawire.io/home-v2/

I can provide login details…

2

[Content Hidden]

3

Hey Melanie,

You’ll need to place a background color on the Style tab of the Button module before it goes transparent. :slight_smile:

Ben

4

Huh? It’s doing the opposite of what I want. I have a class set on the module with css code to make the white hover. It doesn’t work.

I want it to be transparent first then go white on hover.

5

Hey Melanie,

You’re only setting a background hover color on your button. You need to set a background color for the transparency to take effect. I’ve done the change on the first button only so you can check. I will also file a bug report regarding the first issue. :slight_smile:

I believe you’re following the code in this KB article. If so, your code should look like this…

.fl-builder-content .black-hover a.fl-button:hover {
  background: #FFF;
  border: 1px solid #FFF; /*Border width must be the same with the Button module*/
}

Note: black-hover is the class you’ll need to add to your Button module. :slight_smile:

Ben

6

So you’re saying that in order to have the button show transparent, a bg color must be selected on the module? Or is that the bug you’re referring to?

I have added a class of .white-hover to my module and have the css:

.fl-builder-content .white-hover a.fl-button:hover {
  background: #ffffff;
}

and that isn’t showing.

7

Hi Melanie,

The reason why you have to select a background color before the button will become transparent, is because the background option is used to color the border. If you want no border set the width to zero.

In regards to your code not working. You can either add the !important declaration to your CSS or use the following:

#genesis-content .white-hover a.fl-button:hover {
    background-color: #FFF;
}

Thanks,
Danny