Change the button hover color

jacogh · August 2019

http://35.225.209.204/~highwat8/hwwinvestingforimpact.org/

I have previously sent the login info for this site if you need it. I'm using the Betheme default theme.

I am trying to change the overall button HOVER color to a lighter red #bc0a0f from the button color #A20000

Somewhere in this code I have a conflict or I'm writing the wrong Custom CSS.

The Gravity Forms buttons are working fine with the code below.

So too the Pricing Box buttons (changed to background gray color with red hover and white text and icon color)

When I try to change the a.button hover color generally it makes the pricing button white icon and the top menu action button white text disappear. Or, it changes a button color but not the action button. Grrrrrhh...help!

/* GRAVITY FORMS */

/* FOOTER Gravity Forms WIDGET FOOTER submit button change the hover color */

body .gform_wrapper .gform_footer input[type=submit]:hover { background-color: #bc0a0f; }

/* PRICING BOX */

/* Pricing Box plain change BUTTON COLORS to gray with white icon */

.pricing-box-box a.button { background-color: #313137; color: white !important; }

.pricing-box-box a.button .button_icon { background-color: #313137; color: white !important; }

/* Pricing Box plain and featured change HOVER BUTTON COLORS */

.pricing-box-box a.button:hover { background-color: #bc0a0f !important; color: #ffffff !important; }

.pricing-box-box a.button:hover .button_icon {background-color: #bc0a0f !important; color: #ffffff !important; }

My Betheme Options Colors:

ACTION BAR

Action button background:

#a20000

color: white

CONTENT

theme | color : #a20000

Button:

background: #A20000

color: white

Button theme | color: white

FOOTER

theme color: #bc0a0f (brighter red for darker bckgd)

SHORTCODES

almost all set to #A2000 except

contact box| background: white

pricing box color: white

Pablo · August 2019

Hello,

Sorry, I do not quite understand - I can see that all of the buttons are working fine on hover.

All of the buttons on homepage, forms and as a action button.

Did you solve your problem? or do you want to change the colors on certain elements, like on forms and action bar?

Thanks

jacogh · August 2019

I know it's very subtle. The submit and pricing buttons go from a darker red to a lighter red, you can see the transition. The top menu action button and the view our board button are the original hover. They go from a dark red to a darker red while I want it to be from the dark red to the lighter red I created on the other buttons. I got it to work on my other site, highwaterwomen.org, but the sites have enough differences that the same code does not work. Thanks.

Pablo · August 2019

Use this:

a.action_button:hover{
  background:#bc0a0f !important;
}

As can I see, other red buttons are changing from dark red to ligher red fine.

Thanks

jacogh · August 2019

Worked! I was doing background-color not background.

Is there a way to keep the pricing box button icon from disappearing? Thanks.

Pablo · August 2019

Please remove the a.button::after - as I checked it works fine without it.

If it not, I'll create new CSS code.

Thanks

jacogh · August 2019

It's funny, I removed it and the button icon works, but the two buttons - shortcode and popup - revert to the default color shift. If I add it, all the buttons shift, but the icon disappears. Even though I had created that sep code for the button icon.

It's such a little thing but it is driving me crazy not to know why. I even tried to add a custom class to the shortcode button "buttonshort" and isolate that button but I couldn't get it to work. I was probably putting the custom class in the wrong order.

Pablo · August 2019

Please turn off the "Under Construction" mode

I'll check it out - also show me that button with a custom class.

Thanks

jacogh · August 2019

We're setting up the site to go live so I can't take it out of construction right now. But it should go live by Friday night. When it does I will send you link and button information. It's Labor Day weekend here so the schedule might be delayed a day to two. Thanks much.

Pablo · August 2019

Please let me know when it will be live.

thanks

Change the button hover color

Comments