Remove white shadow from image banner button Dawn 15v

Shopify Discussion

Topic summary

A user is trying to remove a white shadow border from an image banner button in their Shopify Dawn theme (version 15), wanting to keep only the red border without affecting other buttons.

Proposed Solution:
Another user suggests locating and deleting specific CSS code in base.css (around lines 1260-1268) that controls the button hover effect’s box-shadow property.

Implementation Issues:

  • The original poster cannot find the exact matching code in their theme files
  • Attempted deletions of similar-looking code caused problems across the entire store, requiring restoration
  • Alternative CSS code provided (adding box-shadow: none !important;) also failed to work
  • The user tried editing both base.css and theme.liquid files without success

Current Status:
The issue remains unresolved. The original poster has requested a call to discuss the problem directly, as text-based troubleshooting has not been successful.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

hiii

I want to remove this white shadow border of image banner button just keep the red border only and don’t want any changes for any other button.

store url https://5a3cf5-fc.myshopify.com/

check the screenshot

WhatsApp Image 2024-08-10 at 16.08.14.jpeg
WhatsApp Image 2024-08-10 at 16.08.14.jpeg900×1600 133 KB

2

Hello @ctal37
Go to online store ---------> themes --------------> actions ------> edit code------->base.css ----> line number 1264
search this code and delete.

.button:not([disabled]):hover:after, {
--border-offset: -1.7px;
box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text),
var(--border-opacity)), 0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

result

13.png
13.png1290×919 188 KB

If this was helpful, hit the like button and accept the solution.
Thanks

3

hey @Rahul_dhiman , this exact matching code isn’t available and I deleted a lookalike and it messed the whole store I repasted, help me with some other code or other way please

4

Go to online store ---------> themes --------------> actions ------> edit code------->base.css
add this code at the end of the file.

.button:not([disabled]):hover:after,  {
    box-shadow: none !important;
}

Thanks

5

sorry it is not working even I added the code in theme.liquid as well

6

Can you find exactly this code - from line number 1260 to 1268 in ----> assets ----> base.css
if yes then delete and save.

.button:not([disabled]):hover:after, .shopify-challenge__button:hover:after, .customer button:hover:after, .shopify-payment-button__button--unbranded:hover:after {
    --border-offset: 1.3px;
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text), var(--border-opacity)), 0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

Thanks

1 Like
7

heyy @Rahul_dhiman .. I know this is gonna sound so random but can we just talk over a call.. its just about my store.. it will be easy for me to explain the things.. please try considering this text ill be glad :slightly_smiling_face: I tried messaging you