Change button hovering style

Kreamch · ‎10-04-2024

I'm trying to change buttons across the homepage (main banner "view products"; "add to cart") hovering style to outlined style. Currently the style of button is solid, while when hovering the button becomes more intense in color, and I would like to hover to a outlined style with inverted color. Is this possible?

In attachment an image for reference.

My website is https://kream.ch, theme is pipeline, and the orange is code: FF763D

thank you for your support

Dan-From-Ryviu · ‎10-04-2024

Hi @Kreamch

You can add this code to theme.liquid file, after <head> in Online Store > Theme > Edit code and check again

<style>
.shopify-product-form button:hover,
.btn:hover {
background: #fff !important;
}
.btn:hover {
box-shadow: 0 0 1px 2px #ff763d;
color: #ff763d !important;
}
.shopify-product-form button:hover { border: 2px solid #ff763d; }
.shopify-product-form button:hover span { color: #ff763d !important;  }
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

goldi07 · ‎10-04-2024

hello @Kreamch

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->theme.css...> ...add the code end of the file

.hero__description.rte.body-size-8.aos-init.aos-animate p :hover {
    text-decoration: underline;
}

.hero__description.rte.body-size-8.aos-init.aos-animate p:hover { 
    text-decoration: underline;
    text-decoration-color: #FF763D;
}




a.standard__cta.hero__btn.btn.btn--primary.btn--long.aos-init.aos-animate:hover {
    background-color: white;
    border: 3px solid;
    color: #FF763D;
}


button.stain-button-primary:hover{
    background-color: white;
    border: 3px solid;
    color: #FF763D;
}
button.stain-button-primary .btn-state-ready:hover {
    color: #FF763D;
}

If this was helpful, hit the like button and accept the solution.
Thanks

Was I helpful?

Buy me a coffee

❤
APPS BY US :

Professional Customer Accounts APP

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections Here

Dan-From-Ryviu · ‎10-04-2024

Hi @Kreamch

You can add this code to theme.liquid file, after <head> in Online Store > Theme > Edit code and check again

<style>
.shopify-product-form button:hover,
.btn:hover {
background: #fff !important;
}
.btn:hover {
box-shadow: 0 0 1px 2px #ff763d;
color: #ff763d !important;
}
.shopify-product-form button:hover { border: 2px solid #ff763d; }
.shopify-product-form button:hover span { color: #ff763d !important;  }
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Kreamch · ‎10-06-2024

Works, Thank you very much

Change button hovering style