Color of some buttons when hovering

  • Author
  • #157861

    Hi, thank you for such a great theme.
    I would like to ask how to change the color when I move the mouse on specific color.
    For example the “Add to cart” button and the “social media” button at the footer.
    Thank you so much!

    The blog I need help with is: (visible only to logged in users)

    Theme Author

    Thank you for using the Appetite theme! :)

    To change colors of the social links, please use this custom CSS:

    /* Social links: default state */
    .social-list li a {
      background-color: #ffffff;
      color: #000000;
      border-color: #000000;
    /* Social links: hover state */
    .social-list li a:hover {
      background-color: #000000;
      color: #ffffff;
      border-color: #ffffff;

    Here is a quick guide on how to add a custom CSS at

    Could you please make your site public, so I can inspect the “Add to cart” button on your site? So, I can provide you a solution on how to change colors of this button?

    Kind regards,

    Original poster

    Hi, thank you for your reply.
    I’ve made my site public, please check it.

    Best regards,

    Theme Author

    Hello Jim,
    Thank you for making your site public.

    Please use this custom CSS to change colors of the “Add to cart” button:

    .wc-block-grid__product-add-to-cart.wp-block-button:not(.is-style-outline) .wp-block-button__link {
      background-color: red;
      color: white;
    .wc-block-grid__product .wc-block-grid__product-add-to-cart.wp-block-button .add_to_cart_button.wp-block-button__link:hover {
      background-color: white;
      color: red;

    Let me know if you have any additional questions.

    Kind regards,

  • The topic ‘Color of some buttons when hovering’ is closed to new replies.