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:
And this is how it looks when pressed:
1