tailwindcss-nice-button.md

HTML:

<div class="grid place-content-center h-screen">
  <button class="text-white relative inline-flex items-center gap-3 overflow-hidden rounded-[12px] p-2 ring-2 ring-base before:absolute before:inset-[2px] before:rounded-[10px] shadow-inside bg-btn">
    <span class="z-10">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="12" x2="12" y1="5" y2="19" />
        <line x1="5" x2="19" y1="12" y2="12" />
      </svg>
    </span>
    <span class="max-[200px]:hidden z-10">New template</span>
    <span class="max-[100px]:hidden rounded-md bg-[#03BE99] px-2 py-1 z-10">N</span>
  </button>
</div>

CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

.shadow-inside::before {
  @apply bg-gradient-to-b from-[#04D2A9] via-[#06D1A9] to-[#06D1A9]
}

.bg-btn {
  @apply bg-gradient-to-b from-[#4FDFC3] via-[#2DD9B7] to-[#07D3AA]
}

Config:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        base: '#03BE99'
      }
    },
  },
  plugins: [],
}

Figma file

Tailwind Play

ahmadrosid/tailwindcss-nice-button.md