Solved

How to change button color in Refresh theme

Snow_Wolf
Explorer
67 0 15

Hi,
My **edited by Community Moderator** homepage sections all have the "Background 2" color scheme and I cannot seem to be able to change the color of the buttons "Learn More" and "Shop now" from the current black (which corresponds to the "Text" secondary colors in the theme color settings) to the Accent 1 color (the green color). The buttons simply take the color of the black text.

Thanks in advance for any help 🙏!

Accepted Solution (1)

valiermedia
Shopify Partner
94 23 58

This is an accepted solution.

Hi there!

To change your button colors you can create a custom class in your .css.
Try putting the following code into the assets/component-image-with-text.css file.

 

.image-with-text__content .image-with-text__text+.button {
    background-color: #0c91c7;
    color: #fff;
}

.image-with-text__content .image-with-text__text+.button:after {
    display: none; /*this will hide the border around the button if you want*/
}

 

This will change the button color and text color of all the 'Shop now' and 'Learn more' buttons.

Replace 'red' and 'black' with the background and text colors you want for the button :). You can use the hex code of specific colors here to get it exactly how you want!

Web Development | UX | Graphics
valiermedia.com

There is enough abundance to go around, so long as we look out for one another 🙂

View solution in original post

Replies 6 (6)

Snow_Wolf
Explorer
67 0 15

Hello,
Thank for your answer but I already played around with the theme settings extensively. I may be missing something but since the button uses the text color ("Text" secondary colors in the theme color) if I change that color, the text changes color too... I already tested that.

valiermedia
Shopify Partner
94 23 58

This is an accepted solution.

Hi there!

To change your button colors you can create a custom class in your .css.
Try putting the following code into the assets/component-image-with-text.css file.

 

.image-with-text__content .image-with-text__text+.button {
    background-color: #0c91c7;
    color: #fff;
}

.image-with-text__content .image-with-text__text+.button:after {
    display: none; /*this will hide the border around the button if you want*/
}

 

This will change the button color and text color of all the 'Shop now' and 'Learn more' buttons.

Replace 'red' and 'black' with the background and text colors you want for the button :). You can use the hex code of specific colors here to get it exactly how you want!

Web Development | UX | Graphics
valiermedia.com

There is enough abundance to go around, so long as we look out for one another 🙂

AvadaCommerce
Shopify Partner
3879 839 968

Hi @Snow_Wolf,

 

This code will help to change the color of your "Learn more" and "Shop now" text to your green color

- From your Shopify admin, navigate to Sales channels > Online store > Themes > Actions > Edit code

- Open the base.css file under the Assets section

- Paste this code at the bottom of that file

.button, .button-label, .shopify-challenge__button, .customer button {
    background: #76be51;
}

- Hit Save 

 

I hope it helps.

banned
Snow_Wolf
Explorer
67 0 15

Thanks @AvadaCommerce this is quite helpful! Only issue is that it makes ALL buttons into that shade. Is it possible to modify so as to affect only the buttons that are on the "Background 2" color scheme? Or for example, how do I modify the "Contact us" button to be white instead of green?

How can I also specify the color I want for the buttons outline?

Thank you!

valiermedia
Shopify Partner
94 23 58

Hi there!

 

This might be possible, but for some reason your site link was removed. Can you re-share?

Web Development | UX | Graphics
valiermedia.com

There is enough abundance to go around, so long as we look out for one another 🙂
LeslieM
New Member
6 0 0

How would you then change the text of the button? So this worked for the background, but what if i want the text to be another color?