Fix my Buttons

Store Design

Topic summary

A user wants to modify all outlined buttons on their Shopify site to display a specific hover effect shown in attached screenshots.

Three solutions were provided:

  1. DaisyVo’s approach: Add CSS via Theme Settings > Custom CSS targeting a.button:hover with a specific background color (#DDD2CB) and black text.

  2. Dan-From-Ryviu’s method: Use Custom CSS with a.button selector, applying background color using CSS variables and setting text color via custom properties.

  3. ZestardTech’s solution: Edit the base.css file directly in the theme code, adding body a.button:hover styles with background color #c2b6ae, black text, and a transition effect.

All solutions involve adding custom CSS but differ in implementation location (Custom CSS panel vs. theme files) and specificity. The discussion remains open with no confirmation from the original poster about which solution worked.

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

Hi,

I want to turn all the buttons with outline on my site to have the hover effect pictured in the second picture.

Screenshot 2025-01-05 at 7.00.54 PM.png
Screenshot 2025-01-05 at 7.00.54 PM.png962×744 315 KB

Screenshot 2025-01-05 at 7.01.04 PM.png
Screenshot 2025-01-05 at 7.01.04 PM.png2194×1180 246 KB

Best,

Chichi0114

2

Hi @chichi0114

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

a.button:hover {
    background: #DDD2CB !important;
    color: black !important;
}

image (27).png
image (27).png1971×585 178 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

3

Hi @chichi0114

Please add this code to Custom CSS in Online Store > Themes > Customize > Themes settings to do that

a.button {
    background-color: rgba(var(--color-button), var(--alpha-button-background)) !important;
    --color-button-text: 23, 25, 31;
}
4

Hello @chichi0114 ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
body a.button:hover{
    background-color: #c2b6ae !important;
    color: #000;
    transition: all 0.3s ease-in-out;
}

Let me know if you need further assistance!