Vibedex.io
Back to gallery
buttonsBeginnerhover

Button — Block

Full-width block-style 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 full-width block button with Tailwind: spans the container width, solid background, white text, hover lightens. Used in form submit positions.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/buttons/5.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-button-5
-->
<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 relative inline-block text-sm font-medium text-indigo-600" href="#">
      <span
        class="absolute inset-0 translate-x-0.5 translate-y-0.5 bg-indigo-600 transition-transform group-hover:translate-x-0 group-hover:translate-y-0"
      ></span>

      <span class="relative block border border-current bg-white px-8 py-3"> Download </span>
    </a>

    <a class="group relative inline-block text-sm font-medium text-indigo-600" href="#">
      <span
        class="absolute inset-0 translate-x-0 translate-y-0 bg-indigo-600 transition-transform group-hover:translate-x-0.5 group-hover:translate-y-0.5"
      ></span>

      <span class="relative block border border-current bg-white px-8 py-3"> Download </span>
    </a>
  </div>
</div>