Custom CSS for hovering over a button (Theme: Reformation)

Solved

Custom CSS for hovering over a button (Theme: Reformation)

OOSODrinksCo
Tourist
11 0 1

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 🙂

 

OOSODrinksCo_0-1716417752422.png

 

Accepted Solutions (2)
BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @OOSODrinksCo

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_1-1716422383088.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_2-1716422390541.png

 

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: 

BSSTechVenture_0-1716422354325.png

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

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 907

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: 

BSSTechVenture_0-1716422986696.png

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

View solution in original post

Replies 6 (6)

BSSCommerce-HDL
Shopify Partner
2305 834 907

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

OOSODrinksCo
Tourist
11 0 1

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;
}

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @OOSODrinksCo

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_1-1716422383088.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_2-1716422390541.png

 

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: 

BSSTechVenture_0-1716422354325.png

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

BSSCommerce-HDL
Shopify Partner
2305 834 907

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: 

BSSTechVenture_0-1716422986696.png

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

OOSODrinksCo
Tourist
11 0 1

These solutions both worked perfectly. THANK YOU!

BSSCommerce-HDL
Shopify Partner
2305 834 907

@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