[SOLVED] How do I make a rounded 3d button (with the right and bottom sides visible) using Tailwind CSS?

How do I make a rounded 3d button (with the right and bottom sides visible) using Tailwind CSS?

I am trying to create a responsive rounded 3D button with the right and bottom sides showing using Tailwind CSS but it doesn't look right. The right and bottom sides do not align with the white part of the button. I've shared the code below. How can I fix this? Or is there a better way to achieve this effect? Thank you in advance!

This is my code (also available on the Tailwind playground):

<script src="https://cdn.tailwindcss.com"></script>

<button class="relative inline-block rounded-lg text-black align-middle no-underline transition-all duration-[0.5s] bg-white px-10 py-5 before:rounded-b-lg before:bottom-[-15px] before:h-[15px] before:w-full before:skew-x-[45deg] before:bg-[#036e15] before:left-2 after:rounded-r-lg after:right-[-15px] after:h-full after:w-[15px] after:skew-y-[45deg] after:bg-[#01370a] after:-bottom-2 active:ml-2.5 active:mt-2.5 active:before:bottom-[-5px] active:before:h-[5px] active:before:left-[3px] active:after:right-[-5px] active:after:w-[5px] active:after:bottom-[-3px] before:absolute before:content-[''] before:transition-all before:duration-[0.5s] after:absolute after:content-[''] after:transition-all after:duration-[0.5s]">
        Press me!
</button>

This is how the button looks at rest: Button

And this is how it looks when pressed: Button on press

Solution

If anyone was interested, I managed to create something that looks like a 3D rounded-edge button by stacking 10 divs on top of each other, each one 1 pixel to the top and 1 pixel to the left of the previous one. I haven't figured out how to add an outline to all the edges but it looks ok!