Does anyone know how to style this button?

I tried this which doesn't work quite as I expected

<a
  href={src}
  class="relative rounded-xl border-2 border-primary-800 bg-transparent px-7 py-1.5 font-display text-lg font-bold shadow-[5px_5px_#BDCE94]"
  >{title}
</a>

<a
  href={src}
  class="relative rounded-xl border-2 border-primary-800 bg-transparent px-7 py-1.5 font-display text-lg font-bold shadow-[5px_5px_#BDCE94]"
  >{title}
</a>

suhaylmvOP•6/11/23, 10:30 AM

The first one is the result I want to achieve (designed in figma), the second one is the code above I tried

Jochem•6/11/23, 11:16 AM

The shadow unfortunately only renders where it would be visible outside of the current element, so you can't use a simple box shadow like that.

There's two options I can see, you can either use some stacked shadows including inset ones, or you can use a pseudo element.

Stacked shadows have the disadvantage that you need to set the background color to match the background of the A's parent, so it won't work over complicated backgrounds. The reason for this is that if you use as the first color, it'll just show the next layer of shadow underneath.

The pseudoelement has the disadvantage that it needs different HTML. You have to put the pseudoelement on the direct parent, which is then set to be as wide as its content. You also need to control the height of the fake shadow somehow, I'm using padding here because it gave me the best results.

The reason you need to use a separate element is because of stacking context. If you position and translate a pseudoelement on the A itself, it creates a new stacking context which makes it impossible to put it underneath the element it's on.

The first example in the codepen is just showing why the regular shadow doesn't work. You can see that there's just a transparent background on the A, so it's showing the red background of its parent.

https://codepen.io/jochemm/pen/XWybezR?editors=1100

CodePenJochem

Offset background demo

...

Jochem•6/11/23, 11:20 AM

@suhaylmv here's some more info about stacking context https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context and https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

suhaylmvOP•6/11/23, 1:21 PM

Thank you @jochemm so much for your effort!

suhaylmvOP•6/11/23, 1:24 PM

I chose the pseudoelement option and works fine, but when I try to move <a> when pressed it doesn't work

Jochem•6/11/23, 1:35 PM

translate doens't work on inline elements, you'll have to set the A to be instead. You can also drop the padding on the parent then

suhaylmvOP•6/11/23, 4:29 PM

Oh, forgot about that

suhaylmvOP•6/11/23, 4:29 PM

Thanks