Remove box shaddow & Box Ofset on all buttons in Dawn theme

Shopify Discussion
1

Hi,

I am customising the dawn theme for a new site but having problems with the box ofset which creates the borders on the buttons.

I have managed to overide a few using things like:

.banner__buttons>.button--banner-custom {
  box-shadow: none! important;
  --border-offset: none;
}

.banner__buttons>.button--banner-custom:hover:after {
  --border-offset: none;
}

… only to then find other places this is affecting the button styling.

Is there a way of just turning off the box shadow & box Offset for ALL buttons in the theme?

I can’t seem to find the catch all selector??

Thanks

1 Like
2

Hi @vwT25Shopdev

Would you mind to share your store URL? possibility there is also box-shadow on the before, after, active, hover and so on.

3

Hi Made4uo-Ribe,

Thanks for replying - currenlty working in a non published theme but the preview link is below if that helps?

https://4toyergdbcm9zz5q-66750677313.shopifypreview.com

1 Like
4

Yes, this is enough. Check this one.

.button:before, .shopify-challenge__button:before, .customer button:before, .shopify-payment-button__button--unbranded:before, .shopify-payment-button [role=button]:before, .cart__dynamic-checkout-buttons [role=button]:before {
    box-shadow: none !important;
}

.button:not([disabled]):hover:after, .shopify-challenge__button:hover:after, .customer button:hover:after, .shopify-payment-button__button--unbranded:hover:after {
    box-shadow: none !important;
}
.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after {
    box-shadow: none !important;
}

And Save.

Result:

Made4uoRibe_0-1711723110343.png
Made4uoRibe_0-1711723110343.png524×197 7.17 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

That works perfectly - thanks so much!!

1 Like