Solved

Button color in Image-with -text section change on hover

bertoloo
Excursionist
22 0 6

I'm almost losing my mind from searching and trying to get the button in the Image-with-text section to change color when I hover over it with the mouse.

Someone can help me?

Thank you in advance!

https://2g32qiz5m7a2iw10-72009384204.shopifypreview.com

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
7532 1454 1450

This is an accepted solution.

Go to your Online store > Themes > Customize > select Image with text section, add this code below in Custom CSS of this section. Replace #5433EB; in my code with your color code

a.button.button--primary:hover {
background-color: #5433EB;
}

 

 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 8 (8)

suyash1
Shopify Partner
9133 1137 1484

@bertoloo - please add this css to the very end of your base.css file and check, for now I made it red, change it to the shade you want

.image-with-text .grid__item .button:hover{background-color:#ff0000 !important;}

 

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
bertoloo
Excursionist
22 0 6

Thanks @suyash1 but the code didn't work

suyash1
Shopify Partner
9133 1137 1484

@bertoloo - where did you add the code? not able to see it

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
bertoloo
Excursionist
22 0 6

I put it in the base.css file and tried.

But nothing changed and I removed the code.

Dan-From-Ryviu
Shopify Partner
7532 1454 1450

This is an accepted solution.

Go to your Online store > Themes > Customize > select Image with text section, add this code below in Custom CSS of this section. Replace #5433EB; in my code with your color code

a.button.button--primary:hover {
background-color: #5433EB;
}

 

 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

bertoloo
Excursionist
22 0 6

It worked @Dan-From-Ryviu !
But now I need to change the colored border to another color. I add "border-color:" to the code?

Dan-From-Ryviu
Shopify Partner
7532 1454 1450

Please update the code, also change #colod-code; in the code

a.button.button--primary:hover {
background-color: oink;
}
a.button.button--primary:hover::after {
box-shadow: 0 0 0 1px #colod-code;
}

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

bertoloo
Excursionist
22 0 6

Thanks! I'm trying to understand in depth how web programming works on Shopify.
The last time I worked with HTML and CSS codes, Hi5 still existed 😂

So thank you @Dan-From-Ryviu for helping me!