Okay
  Public Ticket #3211514
Button hover color
Closed

Comments

  •  2
    Taylor started the conversation

    Hello,

    Is there a way to change button hover colors?

    For example the 'Add to Cart' button and other buttons such as 'View Cart' etc.

    I would like the buttons to be black, but #fb98ad when hovered.

    Thank you!

  •  2,958
    Andrew replied

    Hello Taylor,

    Thank you for reaching out to us.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .woocommerce button[type=submit][name=calc_shipping]:hover, .woocommerce input[type=submit][name=apply_coupon]:hover, 
    .woocommerce input[type=submit][name=update_cart]:hover, 
    .woocommerce-page:not([data-form-submit=see-through]) div[data-project-style=classic] button[type=submit].single_add_to_cart_button:hover{
        background-color: #cf2e2e!important;
    }
    

    Thanks,

  •  2
    Taylor replied

    Hello Andrew,

    Thanks for your reply.

    I added the custom CSS, but I'm still getting a grey color when hovering the buttons.

    Am I missing something?

    Thank you

  •  1,877
    Judith replied

    Hello Taylor,

    Please try this css:

    .woocommerce button[type=submit][name=calc_shipping]:hover, .woocommerce input[type=submit][name=apply_coupon]:hover, .woocommerce input[type=submit][name=update_cart]:hover, .woocommerce-page:not([data-form-submit=see-through]) div[data-project-style=classic] button[type=submit].single_add_to_cart_button:hover {
        background-color: #000!important;
    }

    Thanks.

  •  2
    Taylor replied

    Hello Judith,

    Unfortunately it is still not working for me.

    I'm still getting the grey color when hovering as seen on the webpage provided.

  •  1,877
    Judith replied

    Hello Taylor,

    Please send in your admin login credentials so that we can check this out further.

    Thanks.

  •  2
    Taylor replied

    Hello Judith,

    My login credentials:

    Username: ID395407_Wordpress

    Password: )V9w6*E!#pOQLrlP**5ljG*%

    Thank you

  •  1,877
    Judith replied

    Hi Taylor,

    Please try this css instead:

    #header-outer .widget_shopping_cart a.button:hover, .nectar-slide-in-cart .widget_shopping_cart a.button:hover {
        background-color: #fb98ad!important;
    }

    Thanks

  •  2
    Taylor replied

    Hello Judith,

    I tried it, but for me it's still not working unfortunately.
    I also checked multiple browsers just to make sure, but it doesn't seem to work.

  •  1,877
    Judith replied

    Hello Taylor,

    There is a CSS overriding the css we are adding. I request you lend me sometime to consult with my colleagues and get back to you as soon as I have gotten a response.

    I request your patience.

  •  8,839
    Tahir replied

    Hey Again,

    If you wish to change the hover color of these buttons: 

    8371531107.pngClick on Image to View Larger

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    #header-outer .widget_shopping_cart a.button:hover, .nectar-slide-in-cart .widget_shopping_cart a.button:hover {
        background-color: #f44336 !important;
    }

    Thanks


    ThemeNectar Support Team 

  •  1,877
    Judith replied

    Hello Taylor,

    I added this css, please check it out:

    9042978754.png

    Thanks.

  •  2
    Taylor replied

    Hey Judith,

    Now it's working!

    Thank you very much.