Fix my Buttons

Store Design
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!