How to change button color in Refresh theme

Shopify Discussion
1

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 :folded_hands: !

2

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.

3

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!

1 Like
4

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.

1 Like
5

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!

6

Hi there!

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

7

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?