buttonsBeginnerhover

Icon Button

A button with a leading icon for clear action signaling.

Live preview

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 button with a leading icon using Tailwind: rounded button with an SVG icon (e.g. download arrow) on the left and label on the right, gap between them. Solid filled background, hover darkens the fill. Use inline-flex with items-center.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/buttons/3.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-marketing-button-icon
-->
<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="group inline-block rounded-sm bg-linear-to-r from-pink-500 via-red-500 to-yellow-500 p-0.5 hover:text-white"
      href="#"
    >
      <span
        class="block rounded-xs bg-white px-8 py-3 text-sm font-medium group-hover:bg-transparent"
      >
        Download
      </span>
    </a>

    <a
      class="group inline-block rounded-full bg-linear-to-r from-pink-500 via-red-500 to-yellow-500 p-0.5 hover:text-white"
      href="#"
    >
      <span
        class="block rounded-full bg-white px-8 py-3 text-sm font-medium group-hover:bg-transparent"
      >
        Download
      </span>
    </a>
  </div>
</div>