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

Technical Q&A
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 :slightly_smiling_face:

OOSODrinksCo_0-1716417752422.png
OOSODrinksCo_0-1716417752422.png1834×829 362 KB

2

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.

3

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

4

Hi @OOSODrinksCo ,

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

BSSTechVenture_1-1716422383088.png
BSSTechVenture_1-1716422383088.png1902×899 133 KB

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

BSSTechVenture_2-1716422390541.png
BSSTechVenture_2-1716422390541.png1916×934 101 KB

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
BSSTechVenture_0-1716422354325.png1915×979 240 KB

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 :heart_eyes:

5

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
BSSTechVenture_0-1716422986696.png1919×783 323 KB

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 :heart_eyes:

6

These solutions both worked perfectly. THANK YOU!

7

@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 :heart_eyes: