如何使用 Tailwind CSS 制作圆形 3D 按钮（右侧和底部可见）？

Question

我正在尝试使用 Tailwind CSS 创建一个响应式圆形 3D 按钮，其右侧和底部显示，但它看起来不正确。右侧和底部未与按钮的白色部分对齐。我分享了下面的代码。我该如何解决这个问题？或者有没有更好的方法来达到这个效果？预先感谢您！

这是我的代码（也可以在 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>

这是按钮静止时的样子：

这就是按下时的样子：

Answer 1

如果有人感兴趣，我设法创建了一个看起来像 3D 圆边按钮的东西，方法是通过将 10 个 div 堆叠在一起，每个 div 距前一个 div 的顶部 1 个像素，距前一个 div 的左侧 1 个像素。我还没弄清楚如何向所有边缘添加轮廓，但看起来不错！