按钮 · Loud Cow

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

[hidecontent type="vip1"]

<!-- From Uiverse.io by Uncannypotato69  - Tags: simple, red, button, click, hover effect, hover button, tailwindbutton, tailwindcss -->
<button
  class="flex h-fit w-fit items-center justify-center gap-[0.5em] rounded-full bg-[#c60808] px-[2em] py-[1em] text-white shadow-[inset_0px_-4px_4px_0px_#f05b5b,0px_0px_0px_2px_#f9d1d1,0px_4px_0px_0px_#A60000] duration-[250ms] hover:translate-y-[0.25em] active:translate-y-[0.5em] active:shadow-[inset_0px_-4px_4px_0px_#f05b5b,0px_0px_0px_2px_#f9d1d1]"
>
  <svg
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="h-[1.5em] w-[1.5em]"
  >
    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
    <g
      id="SVGRepo_tracerCarrier"
      stroke-linecap="round"
      stroke-linejoin="round"
    ></g>
    <g id="SVGRepo_iconCarrier">
      <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="1.5"></circle>
      <path
        d="M9 17C9.85038 16.3697 10.8846 16 12 16C13.1154 16 14.1496 16.3697 15 17"
        stroke="#fff"
        stroke-width="1.5"
        stroke-linecap="round"
      ></path>
      <ellipse cx="15" cy="10.5" rx="1" ry="1.5" fill="#fff"></ellipse>
      <ellipse cx="9" cy="10.5" rx="1" ry="1.5" fill="#fff"></ellipse>
    </g>
  </svg>
  <p class="[text-shadow:0px_1px_1px_0px_#950000]">Delete Account</p>
</button>


    

[/hidecontent]