Changing the Button color and button text color in Refresh theme

Store Design

Topic summary

A user wants to customize button styling in the Refresh theme by changing the button color to #fc9ed1 and text color to #fbf7ef for all elements coded to “background 2” color scheme.

Initial Solution:

  • Multiple responders suggested editing the base.css file via Online Store → Theme → Edit code
  • Adding CSS targeting .button with the specified background and text colors

Follow-up Issue:

  • The initial solution worked but created an unwanted button outline (screenshot provided)

Refined Solutions:
Two approaches were offered to remove the outline:

  1. Target .color-background-2 .button with !important flags on background, color, and --alpha-button-background properties
  2. Add .button:after styling with box-shadow: none

Both solutions involve appending CSS code to the bottom of the base.css file. The discussion remains open pending confirmation that the outline issue is resolved.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

HI - I am looking to change the button color to #fc9ed1 and the text color to #fbf7ef for all items that are coded to “background 2” color scheme. Any ideas? Thanks so much!

2

@LeslieM

Please share your store url.

3

Hello @LeslieM

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code below:

.button{
  background-color: #fc9ed1;
  color: #fbf7ef;
}

Let us know how it works for you.
Best regards,
GemPages Support Team

4

Hi @LeslieM

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.

5

This worked, but how do I now get rid of the outline? See attached. Thanks so much :slightly_smiling_face:

Screenshot 2023-02-02 at 9.34.49 PM.png
Screenshot 2023-02-02 at 9.34.49 PM.png452×232 1.78 KB

6

Hi @LeslieM ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.color-background-2 .button {
    background: #fc9ed1 !important;
    color: #fbf7ef !important;
    --alpha-button-background: #fc9ed1 !important;
}

Hope it helps!

7

@LeslieM To remove the outline of the button, you can add this code to the base.css file:

.button:after{
  box-shadow: none;
}

Let us know how it works for you.
Best regards,
GemPages Support Team