Vibedex.io
Back to gallery
buttonsBeginnerhover

Outline / Solid Button Pair

A solid primary button next to an outline secondary button.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a Tailwind button pair: a solid primary button (filled background, white text) and an outline secondary button (transparent bg, colored border + text). Both use the same brand color and invert their fill on hover. Same shape (rounded), same padding, same font weight.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/buttons/2.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-button-pair
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="flex flex-wrap justify-center gap-4 p-6 w-full">
<a
      class="inline-flex items-center gap-2 rounded-sm border border-indigo-600 bg-indigo-600 px-8 py-3 text-white hover:bg-transparent hover:text-indigo-600"
      href="#"
    >
      <span class="text-sm font-medium"> Download </span>

      <svg
        class="size-5 rtl:rotate-180"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M17 8l4 4m0 0l-4 4m4-4H3"
        />
      </svg>
    </a>

    <a
      class="inline-flex items-center gap-2 rounded-sm border border-indigo-600 px-8 py-3 text-indigo-600 hover:bg-indigo-600 hover:text-white"
      href="#"
    >
      <span class="text-sm font-medium"> Download </span>

      <svg
        class="size-5 rtl:rotate-180"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M17 8l4 4m0 0l-4 4m4-4H3"
        />
      </svg>
    </a>
  </div>
</div>