I want to remove hover increase in Add to Cart button

Store Design
, , ,
1

I want to remove hover increase in Add to Cart button. You can checkout the below screenshot, you will be able to understand.

Screenshot (37).png
Screenshot (37).png1366×768 157 KB

In this you can see that the add to cart button on HOVER is little bigger than the add to cart button on ACTIVE mode. I want to keep the add to cart button size same as the active one even while hovering the button.

Please help me out with it.

As I am after it since more than 15 days. But not getting proper solution.

Thanks in advance.

2

Hello, @swayurindia
I have checked yours issue
Go to online Store > Edit Code > assets base.css

.icon.icon-cart-empty, .icon.icon-cart {
	transform: scale(1.07);
}

add this CSS at bottom
Like This

oscprofessional_0-1694865522191.png
oscprofessional_0-1694865522191.png964×777 48.4 KB

3

I don’t want to remove it.

Check the Add to Cart button downwards, the active add to cart button is smaller than the hover add to cart button.

Check and revert back. Please

4

Hi @swayurindia

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

Please find and delete this code

button.quick-add__submit:hover {
    box-shadow: none !important;
    border: 1px solid #1967D2 !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

5

Still the issue is not solved. You can checkout Jiomart.com to see the add to cart button. In their website whenever we hover on the button it forms a blue colour border around the existing border itself.

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