How can I change the button color on hover?

Store Design
, ,
1

Hello everyone!

Could somebody help with how I can invert the color of the buttons on hover?

Thank you In advance!

2

Hello @Farid117
Would you mind to share your URL website? with password if its protected.
Thanks!

3

Yes, of course!

https://0b798d-3.myshopify.com/

4 
.button:hover{
  background-color: #000;
}

Please add this css in your base.css file.
Thanks.

5

Hi @Farid117

If you want to invert the colors of the button when hovered, please follow the instructions below.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Asset” folder, click on “base.css” file
  • Add the code below at the very bottom of the file

NOTE: Inverting transparent color is always going to be transparent. Therefore, text will be hidden

a.button.button--primary:hover, a.button.button--secondary:hover {
    color: rgba(var(--color-button),var(--alpha-button-background));
    background-color: rgb(var(--color-button-text));
}
  • Make sure to SAVE

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

Thank you very much Ribe!

It has worked!