Streaming live at 10am (PST)

Checkout buttons resizing on hover

Hi, I’m trying to work out if there is a bug on the checkout panel, or if somehow the buttons are inheriting something they shouldn’t.

They change size on hover.


https://preview.webflow.com/preview/wip-evari-1?utm_medium=preview_link&utm_source=designer&utm_content=wip-evari-1&preview=a337c5b9ca0f6db633a59f3f213bc504&pageId=5f194c7ce525cac67d843f14&mode=preview

@nclement - it’s on your global anchor element, it goes to display: inline-block on hover.

image

image

image

image

Thanks Sam-G.

Where do I find that to remove it?

I just don’t see it anywhere.

@nclement - I would just add display block to your button in this case:

  1. Add a class to your checkout button (or a global one for all buttons like btn):
    image

  2. Select the Hover state for the selector:
    image

  3. Set Display to block:
    image

Thanks I’ll give it a go

Tried that, it’s going even more crazy now.

https://preview.webflow.com/preview/wip-evari-1?utm_medium=preview_link&utm_source=designer&utm_content=wip-evari-1&preview=a337c5b9ca0f6db633a59f3f213bc504&pageId=5f194c7ce525cac67d843f14&mode=preview

@nclement you put the class on the div wrapping the entire order summary:

image

It needs to be on the button itself:

image

Thanks Sam, I had a style class conflict. Seems fixed for now.