Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I am having trouble figuring out something that I feel like should be a simple fix...I have been able to customize the color, text, and border of a button with the CSS code in the image below, but when I hover over it with my mouse, it becomes black button background on black text. I've tried to use CSS code such as ".button:hover" but that doesn't fix it. This is happening on two of my buttons on the homepage and it's driving me CRAZY! Any ideas are more than welcome. Thank you 🙂
Solved! Go to the solution
This is an accepted solution.
Hi @OOSODrinksCo,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file -> Save
.layered-images-with-text__content--inner .button[title="Learn More"]:hover {
color: black !important;
}
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
This is an accepted solution.
Hi @OOSODrinksCo , For button shop now:
Pls insert this code to your file css:
#shopify-section-template--17366299574294__16479477632637c9a7 .slideshow__slide-inner a.button.white:hover {
color: white !important;
}
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hi @OOSODrinksCo , Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
I have been able to edit the background button color with the below, new code, but for some reason the I can't get the text color or border to change for the hover option.
.button {
background-color: #fd9018;
color: #000000 !important;
border-color: #fd9018;
}
.button::before {
background-color: #ba2d15;
color: #ffffff !important;
border-color: #ba2d15;
}
This is an accepted solution.
Hi @OOSODrinksCo,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file -> Save
.layered-images-with-text__content--inner .button[title="Learn More"]:hover {
color: black !important;
}
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
This is an accepted solution.
Hi @OOSODrinksCo , For button shop now:
Pls insert this code to your file css:
#shopify-section-template--17366299574294__16479477632637c9a7 .slideshow__slide-inner a.button.white:hover {
color: white !important;
}
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
These solutions both worked perfectly. THANK YOU!
@OOSODrinksCo We're happy to see that our suggestion helped you solve your issue. This can be a reference for other merchants if they have an issue like you. Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon. Thanks in advance 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024