motionsites中文站 / 按钮 · Gentle Mule
按钮 · Gentle Mule
aadmin2026-09-19 发布组件0 阅读

按钮 · Gentle Mule

类型:组件 · 分类:按钮 · 收录:2026-09-19 · 源码:会员可见

[hidecontent type="vip1"]
<!-- From Uiverse.io by Uncannypotato69  - Tags: skeuomorphism, pink, button, click, hover effect, click effect, tailwindbutton, tailwindcss -->
<button
  class="group flex h-fit w-fit flex-col items-center justify-center rounded-full bg-[#F1ddcf] px-[2em] py-[0.5em] shadow-[inset_0px_2px_4px_0px_#f9f1eb,inset_0px_-2px_4px_0px_#e8c8b0,0px_-2px_16px_0px_#e8c8b0,0px_2px_16px_0px_#f9f1eb] duration-200 hover:translate-y-[5%] active:translate-y-[7%] active:shadow-[inset_0px_-2px_4px_0px_#f9f1eb,inset_0px_2px_4px_0px_#e8c8b0,0px_2px_16px_0px_#e8c8b0,0px_2px_16px_0px_#f9f1eb]"
>
  <p
    class="font-nunito text-[1.5em] font-semibold text-[#d19466] duration-200 group-active:translate-y-[5%]"
  >
    Button
  </p>
</button>


    
[/hidecontent]
← 返回首页