Change the button hover color



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

Comments

  • 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
  • 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.
  • edited 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

  • Worked! I was doing background-color not background. 

    Is there a way to keep the pricing box button icon from disappearing? Thanks.
  • Please remove the a.button::after - as I checked it works fine without it.
    If it not, I'll create new CSS code.

    Thanks
  • 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.
  • Please turn off the "Under Construction" mode
    I'll check it out - also show me that button with a custom class.
    Thanks
  • 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.
  • Please let me know when it will be live.
    thanks
Sign In or Register to comment.