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

Store Design
,
1

Is there a way to add a hover effect where the button slightly moves up on the “orange button?” I wouldn’t mind having this on all buttons similar to this. Shop is artfinia.com

21321312321312.jpg
21321312321312.jpg293×240 8.06 KB

2

Hello @David123123 ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file or theme.css file

Add this following code at the bottom of page

.shop-now-button {
  position: relative;
  transition: transform 0.2s ease-out;
}

.shop-now-button:hover {
  transform: translateY(-5px);
}

Save and preview

Hope this can help.

Transcy

3

Hello @David123123

In Shopify Admin, you can go to Edit theme code, open file app.css and add this code at the bottom

.flickity-slider .button-overflow-container:hover {
    position: relative;
    top: -12px;
}
4

Hello, thanks this seemed to work. Is there a way to add a transition effect to ease in and out?

5

Hello @David123123

If you want to add transition effect, and modify the code like this

.flickity-slider .button-overflow-container {
    position: relative;
    top: 0;
    transition: top 0.2s;
}

.flickity-slider .button-overflow-container:hover {
    top: -12px;
}