Button Text and Color the same and cant change!

Store Design
1

hi!

Hi, I run www.tinyotters.com. Most of the buttons on my site are fine, but in the product section they aren’t - the text and button color are the same and appear blended. I believe I’ll need to change the button color to something softer (like my light brown color) so that the button and text both appear.

As you can see in the screenshot below, the dropdown checkout button on the shopping cart, the little solid circle that appears over the shopping cart once you add something, and the buttons showing the selected size, ALL appear as solid buttons, not buttons with text in them.

If possible, I’d like to change this in the UI if I can - anyone know a good solution?

I don’t know if these 3 buttons change in a different place in the UI than other buttons on my site which seem to work fine.

tinyotters_0-1668738596707.png
tinyotters_0-1668738596707.png2378×1274 290 KB

2

Hello @tinyotters ,

  1. Go to Online Store → Theme → Edit code
  2. Open your base.css, you can find this file under assets
  3. Paste the below code at the end
.product-form__input input[type=radio]:checked+label{
color: #fff !important;
}
.cart-count-bubble {
    color: #fff !important;
}
#cart-notification-form .button {
    color: #fff !important;
}

Thanks

3

@Guleria This was perfect - thank you SO much!

1 Like
4

Hi @tinyotters ,

This is PageFly - Advanced Page Builder.

You can try with this code:

Follow this:

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

Step 2: Search file base.css.

Step 3: paste below code in bottom of file → save.

.product-form__input input[type=radio]:checked+label {

background-color: #bba7d6 !important;

}

.product-form__submit {

background-color: #bba7d6 !important;

}

.button–full-width {

background-color: #bba7d6 !important;

}

.cart-count-bubble {

background-color: hsl(206deg 100% 73%) !important;

}

Hope that my solution works for you.

Best regards,

PageFly