I want to change the add to cart button height

Technical Q&A
, , ,
1

I want to change the add to cart button height when the hover is occurring.

As you can see in the below attached screenshot, whenever we’re hovering on the add to cart button it is showing slight bigger than the active add to cart button.

Screenshot (39).png
Screenshot (39).png1366×768 122 KB

https://www.swayur.com/collections/all?sort_by=price-descending&filter.v.price.gte=&filter.v.price.lte=

the above is the link for the page.

2

@swayurindia ,

The height looks the same in both states. correct me if I am checking anything wrong.

3

No the height of the hovering button is increasing a little bit. Kindly zoom in and see it.

For more info you can visit this link: https://www.jiomart.com/c/groceries/2

This website is also having the same hovering which I want. On this website whenever we hover over the add to cart button the height of the add to cart button is not increased it is the same as the normal (active) button.

4

Hi @swayurindia ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file quick-add.css

Step 3: Paste the below code at the bottom of the file → Save

button.quick-add__submit{
transition:all 0.2s
}
button.quick-add__submit:hover{
transform:scale(1.1)
}

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

5

This solution is not working. What to do?

Please provide me with a better solution. I’ve been stuck into this since the last month.

I think one of the Shopify Community members provided me with a border code in which another border appears when hovering and the main border (which is in #e8e8e8 colour) is being turning transparent in color whenever we hover on the button.

Please check and zoom it properly you will come to know the problem.

Provide me solution for this ASAP!

Regards,

Harsh

6

Hi,

you can tru use

#MainContent .quick-add__submit{
box-shadow:none !important;
border:solid 1px gray !important
}
#MainContent .quick-add__submit:after,#MainContent .quick-add__submit:before{
box-shadow:none !important;
border:none !important
}
#MainContent button.quick-add__submit:hover{
border: 1px solid #1967D2 !important;
}
7

Not solved still.

For more deep understanding visit this link: https://www.jiomart.com/c/groceries/2

8

Sorry, but I can’t open your link