Color and hoover CFA section

Shapely
1

Hello!
I used this to change the color if the call to action section:

.cfa-section {
height: 10%;
padding: 70px;
background: #D4AF37;
}

a.btn.btn-lg.cfa-button {
border-color: white;
color: #fff;
}

  1. How can I change the button color to white (not only the border)?
  2. How can I make it hoover?

Thanks a lot!!

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to edit the button by going to Appearance > Customize > Additional CSS and pasting it there.

/*Button background color*/
a.btn.btn-lg.cfa-button {
border-color: white;
color: black;
background-color: white;
}
/*Button hover*/
a.btn.btn-lg.cfa-button:hover, a.btn.btn-lg.cfa-button:visited:hover {
    background: red;
    border-color: red;
}

Best Regards,
Support

3

It worked partly. But the background is not white nor red (hoover).

4

Hi there,

I hope you are having an awesome day and thanks for contacting us regarding your query.

Kindly provide me with a link to this page so that I may be able to write up some CSS that should work for your setup.

Looking forward to your reply :slight_smile:

Best Regards,
Support

5

Sorry, here is the page: http://empoweringvalue.de/empoweringvaluede/

Thank you very much!

6

Hello there,

Thanks for that information. Please try using the following CSS instead:


.btn-white, .image-bg .btn, .image-bg .btn:visited {
    color: #000;
    border-color: #fff;
    background: white;
}

.btn-white:hover, .image-bg .btn:hover, .image-bg .btn:visited:hover {
    background: red;
    border-color: red;
    color: #222;
}

Best Regards,
Support

7

It’s still not working like I want but I can live with it :wink: Thank you!!!

8

Hello there,

What aspect of the solution did not work out correctly?

Best Regards,
Support

9

I think I need to learn CSS better :wink: Thank you for your patience!!

I only looks like the border is changing the color.
I would like to have all the “gold” buttons hoover in the same way.

Now it’s three different kinds:
a) JOIN, CHANGE, CHALLENGE, GAME PLAN, LEAD (they hoover a little to light)
b) STARTE MIT BE WELL! CHANGE, STARTE MIT DEINER BE COMPLETE! CHALLENGE, STARTE JETZT DEIN BE INDEPENDENT! START UP (they are all different sizes)
c) VEREINBARE EINEN TERMIN (just a border)

Plus the “VEREINBARE EINEN TERMIN” is pretty far right. Maybe I should solve to use a parallax section for this so it will look like the others? You will just see a “dummy” - but I don’t know :wink:

Thank you again!!!

10

Hello there,

You can change the hover color using this CSS:

/*Button hover color*/
.btn-filled:hover, .btn:visited:hover, .btn.searchsubmit:hover, .image-bg .btn.btn-filled:hover, input[type="submit"]:hover, .video-widget .video-controls button {
    background: #f3c11f;
    border-color: #deb941;
}

As it goes for the “VEREINBARE EINEN TERMIN” button, you need to remove the “!important” from the code because that is forcing the button styles to every button. It should look like this:

.btn-filled, .btn-filled:visited, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    background: #d4af37;
    border: 2px solid#d4af37;
}

The following code can be used to reduce the width and move the button closer to the left:

@media (min-width: 768px)
.col-sm-9 {
    width: 65%;
}

Best Regards,
Support