How can I modify the hover button color on my product page?

[BrentonLoui]

How do I change color of hoover button on the product page and text?

[PageFly-Noah]

Hi @BrentonLoui 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.product-form__submit:hover {
background: red !important;
    color: white !important;
}
</style>

Note: you can change the color value of the text and background.

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[Dan-From-Ryviu]

Hi @BrentonLoui 

Please go to your Online store > themes > Edit code  > open base.css and add this below code at the bottom of your file 

.product-form__submit:hover { color: #fff !important; }
.product-form__submit:hover svg path { fill: #fff !important; }

 

[ZenoPageBuilder]

Hello @BrentonLoui 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.product-form__submit:hover {
    background-color: #EEE !important;
    color: #0000ff !important;
}

The result on hover

Make sure to change color values as you need.

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.product-form__submit:hover path{
fill: #fff;
}
.product-form__submit:hover{
color: #fff;
}