Change button hovering style

Solved

Change button hovering style

AhsenZa
Excursionist
33 0 5

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

 


Screenshot 2024-10-04 at 16.46.33.png

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10147 2017 2081

This is an accepted solution.

Hi @AhsenZa 

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>

Screenshot 2024-10-04 at 15.17.48.pngScreenshot 2024-10-04 at 15.17.53.png

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 3 (3)

goldi07
Excursionist
28 3 3

hello @AhsenZa 

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



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
Shopify Partner
10147 2017 2081

This is an accepted solution.

Hi @AhsenZa 

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>

Screenshot 2024-10-04 at 15.17.48.pngScreenshot 2024-10-04 at 15.17.53.png

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

AhsenZa
Excursionist
33 0 5

Works, Thank you very much