buttonsIntermediatehover

Trailing-Arrow Button

A CTA-style button with a trailing arrow that slides on hover.

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 CTA button with Tailwind: text label and an arrow icon on the right; on hover the arrow translates 4px to the right (transition-transform). Padded, rounded, white text on a dark background. The arrow slide is the affordance that this is a 'go' action.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/buttons/8.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-marketing-button-arrow
-->
<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-block rounded-sm bg-indigo-600 px-8 py-3 text-sm font-medium text-white transition hover:scale-110 hover:rotate-2"
      href="#"
    >
      Download
    </a>

    <a
      class="inline-block rounded-sm border border-current px-8 py-3 text-sm font-medium text-indigo-600 transition hover:scale-110 hover:rotate-2"
      href="#"
    >
      Download
    </a>

    <a
      class="inline-block rounded-sm bg-indigo-600 px-8 py-3 text-sm font-medium text-white transition hover:scale-110 hover:-rotate-2"
      href="#"
    >
      Download
    </a>

    <a
      class="inline-block rounded-sm border border-current px-8 py-3 text-sm font-medium text-indigo-600 transition hover:scale-110 hover:-rotate-2"
      href="#"
    >
      Download
    </a>
  </div>
</div>