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

Solved

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

OOSODrinksCo
Tourist
7 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 Expert
997 336 396

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Expert
997 336 396

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 6 (6)

BSSCommerce-HDL
Shopify Expert
997 336 396

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
OOSODrinksCo
Tourist
7 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 Expert
997 336 396

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSSCommerce-HDL
Shopify Expert
997 336 396

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
OOSODrinksCo
Tourist
7 0 1

These solutions both worked perfectly. THANK YOU!

BSSCommerce-HDL
Shopify Expert
997 336 396

@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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency