How can I add a hover effect to buttons on the Vision Theme?

[David123123]

Hello,

Is there a way to make it so when i hover on the button from sliders, or even across pages, that it adds a hover effect. I want to ideally make the button change to darker orange and for it to slightly raise up in a smooth ease in and out effect. Shop name is: https://artfinia.com/

[Made4uo-Ribe]

Hi @David123123

Do you mean like this?

Its looks like same color but I used the color tyhat you have in your store.

Try this one.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

a.button.accent:hover {
    background: #c37020;
}

• And Save.

[David123123]

Yea i want the whole button and text to hover a bit up kinda like a lil hover animation

[PageFly-Noah]

Hi @David123123

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Noah | PageFly