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>
6 Replies
.suhaylmv
.suhaylmv2y ago
The first one is the result I want to achieve (designed in figma), the second one is the code above I tried
Jochem
Jochem2y ago
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 transparent 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
.suhaylmv
.suhaylmv2y ago
Thank you @jochemm so much for your effort! I chose the pseudoelement option and works fine, but when I try to move <a> when pressed it doesn't work

<div
class="relative w-min px-4 py-1.5 before:absolute before:inset-0 before:translate-x-[23px] before:translate-y-[8px] before:rounded-[10px] before:bg-[#BDCE94] before:content-[''] lg:before:translate-x-[26px] xl:p-[18px] xl:py-[9px]"
>
<a
href="/blog/"
class="relative rounded-[10px] border border-primary-800 bg-transparent px-8 py-2 font-display text-xl font-bold transition duration-300 ease-in-out active:translate-x-2 xl:px-9 xl:py-2.5 xl:text-[22px]"
>{title}
</a>
</div>

<div
class="relative w-min px-4 py-1.5 before:absolute before:inset-0 before:translate-x-[23px] before:translate-y-[8px] before:rounded-[10px] before:bg-[#BDCE94] before:content-[''] lg:before:translate-x-[26px] xl:p-[18px] xl:py-[9px]"
>
<a
href="/blog/"
class="relative rounded-[10px] border border-primary-800 bg-transparent px-8 py-2 font-display text-xl font-bold transition duration-300 ease-in-out active:translate-x-2 xl:px-9 xl:py-2.5 xl:text-[22px]"
>{title}
</a>
</div>
Jochem
Jochem2y ago
translate doens't work on inline elements, you'll have to set the A to be inline-block instead. You can also drop the padding on the parent then
.suhaylmv
.suhaylmv2y ago
Oh, forgot about that Thanks
Want results from more Discord servers?
Add your server