Button

<div class="flex flex-wrap items-center justify-center space-x-4 p-6">
  <button
    class="relative inline-flex h-10 items-center justify-center space-x-2 whitespace-nowrap rounded-lg bg-gray-950 bg-gradient-to-b from-white/15 to-transparent px-4 text-center text-sm font-medium text-white transition before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-white/40 hover:bg-gray-900 focus:outline-0 focus-visible:ring-1 focus-visible:ring-gray-500 disabled:pointer-events-none disabled:opacity-75"
  >
    Get Started
  </button>

  <button
    class="relative inline-flex h-10 items-center justify-center space-x-2 whitespace-nowrap rounded-lg border border-gray-300 bg-white bg-gradient-to-b from-transparent to-gray-900/5 px-4 text-center text-sm font-medium text-black shadow-sm transition hover:bg-gray-50 focus:outline-0 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500 disabled:pointer-events-none disabled:opacity-75"
  >
    Get Started
  </button>
</div>

<div class="flex flex-wrap items-center justify-center space-x-4 p-6">
  <button
    class="relative inline-flex h-10 items-center justify-center space-x-2 whitespace-nowrap rounded-lg bg-gray-950 bg-gradient-to-b from-white/15 to-transparent px-4 text-center text-sm font-medium text-white transition before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-white/40 hover:bg-gray-900 focus:outline-0 focus-visible:ring-1 focus-visible:ring-gray-500 disabled:pointer-events-none disabled:opacity-75"
  >
    <span>Get Started</span>
    <!-- Heroicons name: outline/arrow-right-circle -->
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
    </svg>
  </button>

  <button
    class="relative inline-flex h-10 items-center justify-center space-x-2 whitespace-nowrap rounded-lg border border-gray-300 bg-white bg-gradient-to-b from-transparent to-gray-900/5 px-4 text-center text-sm font-medium text-black shadow-sm transition hover:bg-gray-50 focus:outline-0 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500 disabled:pointer-events-none disabled:opacity-75"
  >
    <span>Get Started</span>
    <!-- Heroicons name: outline/arrow-right-circle -->
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
    </svg>
  </button>
</div>

<div class="flex flex-wrap items-center justify-center space-x-4 p-6">
  <button
    class="relative inline-flex size-10 items-center justify-center whitespace-nowrap rounded-lg bg-gray-950 bg-gradient-to-b from-white/15 to-transparent text-white transition before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-white/40 hover:bg-gray-900 focus:outline-0 focus-visible:ring-1 focus-visible:ring-gray-500 disabled:pointer-events-none disabled:opacity-75"
  >
    <!-- Heroicons name: mini/arrow-down-tray -->
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
      <path
        d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z"
      />
      <path
        d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z"
      />
    </svg>
  </button>

  <button
    class="relative inline-flex size-10 items-center justify-center whitespace-nowrap rounded-lg border border-gray-300 bg-white bg-gradient-to-b from-transparent to-gray-900/5 text-black shadow-sm transition hover:bg-gray-50 focus:outline-0 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500 disabled:pointer-events-none disabled:opacity-75"
  >
    <!-- Heroicons name: mini/arrow-down-tray -->
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
      <path
        d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z"
      />
      <path
        d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z"
      />
    </svg>
  </button>
</div>

<div class="flex flex-wrap items-center justify-center space-x-9 p-6">
  <button
    class="relative inline-flex h-10 items-center justify-center space-x-2 whitespace-nowrap rounded-lg bg-gray-950 bg-gradient-to-b from-white/15 to-transparent px-4 text-center text-sm font-medium text-white transition before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-white/40 hover:bg-gray-900 focus:outline-0 focus-visible:ring-1 focus-visible:ring-gray-500 disabled:pointer-events-none disabled:opacity-75"
  >
    Notifications
    <span class="absolute right-0 top-0 inline-flex -translate-y-1/2 translate-x-1/2 items-center rounded-full bg-red-500 px-2 py-0.5 text-xs">
      24
    </span>
  </button>

  <button
    class="relative inline-flex h-10 items-center justify-center space-x-2 whitespace-nowrap rounded-lg border border-gray-300 bg-white bg-gradient-to-b from-transparent to-gray-900/5 px-4 text-center text-sm font-medium text-black shadow-sm transition hover:bg-gray-50 focus:outline-0 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500 disabled:pointer-events-none disabled:opacity-75"
  >
    Get Started
    <span
      class="absolute right-0 top-0 inline-flex -translate-y-1/2 translate-x-1/2 items-center rounded-full bg-gray-950 px-2 py-0.5 text-xs text-white"
    >
      BETA
    </span>
  </button>
</div>

<div class="flex items-center justify-center p-6">
  <button class="group flex items-center p-1 text-base font-medium text-gray-600 transition hover:text-gray-950">
    <div class="mr-1">Start your free trial</div>

    <!-- Heroicons name: micro/arrow-right -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      fill="currentColor"
      class="h-4 w-0 shrink-0 translate-y-px transition-all group-hover:w-4"
    >
      <path
        fill-rule="evenodd"
        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
        clip-rule="evenodd"
      />
    </svg>

    <!-- Heroicons name: micro/chevron-right -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      fill="currentColor"
      class="h-4 w-4 shrink-0 translate-y-px transition-all group-hover:w-0"
    >
      <path
        fill-rule="evenodd"
        d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
        clip-rule="evenodd"
      />
    </svg>
  </button>
</div>

<div class="flex flex-col items-center justify-center space-y-6 p-6">
  <div class="flex">
    <button
      class="relative flex size-10 shrink-0 items-center justify-center bg-white text-gray-600 ring-1 ring-gray-200 transition first:rounded-l last:rounded-r hover:bg-gray-50 focus:z-10 focus:bg-gray-50 focus:outline-0 focus:ring-2 focus:ring-indigo-300"
    >
      <!-- prettier-ignore -->
      <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="68" x2="216" y2="68" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="108" x2="168" y2="108" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="148" x2="216" y2="148" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="188" x2="168" y2="188" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>
    </button>

    <button
      class="relative flex size-10 shrink-0 items-center justify-center bg-white text-gray-600 ring-1 ring-gray-200 transition first:rounded-l last:rounded-r hover:bg-gray-50 focus:z-10 focus:bg-gray-50 focus:outline-0 focus:ring-2 focus:ring-indigo-300"
    >
      <!-- prettier-ignore -->
      <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="68" x2="216" y2="68" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="64" y1="108" x2="192" y2="108" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="148" x2="216" y2="148" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="64" y1="188" x2="192" y2="188" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>
    </button>

    <button
      class="relative flex size-10 shrink-0 items-center justify-center bg-white text-gray-600 ring-1 ring-gray-200 transition first:rounded-l last:rounded-r hover:bg-gray-50 focus:z-10 focus:bg-gray-50 focus:outline-0 focus:ring-2 focus:ring-indigo-300"
    >
      <!-- prettier-ignore -->
      <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="68" x2="216" y2="68" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="88" y1="108" x2="216" y2="108" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="148" x2="216" y2="148" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="88" y1="188" x2="216" y2="188" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>
    </button>

    <button
      class="relative flex size-10 shrink-0 items-center justify-center bg-white text-gray-600 ring-1 ring-gray-200 transition first:rounded-l last:rounded-r hover:bg-gray-50 focus:z-10 focus:bg-gray-50 focus:outline-0 focus:ring-2 focus:ring-indigo-300"
    >
      <!-- prettier-ignore -->
      <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="68" x2="216" y2="68" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="108" x2="216" y2="108" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="148" x2="216" y2="148" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="188" x2="216" y2="188" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>
    </button>
  </div>

  <div class="flex">
    <button
      class="relative flex size-10 shrink-0 items-center justify-center bg-white text-gray-600 ring-1 ring-gray-200 transition first:rounded-l last:rounded-r hover:bg-gray-50 focus:z-10 focus:bg-gray-50 focus:outline-0 focus:ring-2 focus:ring-indigo-300"
    >
      <!-- prettier-ignore -->
      <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="68" x2="216" y2="68" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="108" x2="168" y2="108" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="148" x2="216" y2="148" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="188" x2="168" y2="188" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>
    </button>

    <button
      class="relative flex size-10 shrink-0 items-center justify-center bg-white text-gray-600 ring-1 ring-gray-200 transition first:rounded-l last:rounded-r hover:bg-gray-50 focus:z-10 focus:bg-gray-50 focus:outline-0 focus:ring-2 focus:ring-indigo-300"
    >
      <!-- prettier-ignore -->
      <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="68" x2="216" y2="68" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="64" y1="108" x2="192" y2="108" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="148" x2="216" y2="148" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="64" y1="188" x2="192" y2="188" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>
    </button>

    <!-- Active State -->
    <button
      class="relative flex size-10 shrink-0 items-center justify-center bg-gray-100 text-indigo-600 ring-1 ring-gray-200 transition first:rounded-l last:rounded-r hover:bg-gray-50 focus:z-10 focus:bg-gray-50 focus:outline-0 focus:ring-2 focus:ring-indigo-300"
    >
      <!-- prettier-ignore -->
      <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="68" x2="216" y2="68" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="88" y1="108" x2="216" y2="108" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="148" x2="216" y2="148" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="88" y1="188" x2="216" y2="188" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>
    </button>

    <button
      class="relative flex size-10 shrink-0 items-center justify-center bg-white text-gray-600 ring-1 ring-gray-200 transition first:rounded-l last:rounded-r hover:bg-gray-50 focus:z-10 focus:bg-gray-50 focus:outline-0 focus:ring-2 focus:ring-indigo-300"
    >
      <!-- prettier-ignore -->
      <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="68" x2="216" y2="68" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="108" x2="216" y2="108" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="148" x2="216" y2="148" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="188" x2="216" y2="188" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>
    </button>
  </div>
  <!-- 
  Phosphor Icons: 
    - regular/text-align-center
    - regular/text-align-justify
    - regular/text-align-left
    - regular/text-align-right
--></div>