Hover Effect Buttons Problem

Store Design
, , , , ,
1

Hi, I found an issue on my store with the hover effect for buttons on the login, reset password, and account creation pages.

When I hover over the “Sign In,” “Submit,” or “Create” buttons, the buttons tilt about 10 degrees to the right. I’d like them to stay straight.

I’m not sure how this happened, as I didn’t modify anything, and I only just noticed it now. How can I fix this?

I had the same problem with a button on the homepage, and it was fixed with this code:

.button:hover { transform: none !important; }

You can check out the current issues here:

Thanks a lot,
Tim

2

Hey @CreatorTim

Please paste this code in the end of base.css file.

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .animate--hover-3d-lift .card-wrapper:hover .card--card, .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner, .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover, .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover, .animate--hover-3d-lift .customer button:not([disabled]):hover, .animate--hover-3d-lift .shopify-payment-button__button:hover, .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
        /* transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; */
        transform: rotate(0deg) !important; 
        box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05), 0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
    }
}
3

No issue at all , checked it. I think it solved

4

Thank you! Works