buttonsBeginnerhover

Neo Button — Outlined

Outlined neobrutalism button with hard shadow.

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 an outlined neobrutalism button with Tailwind: white background, thick black border, hard offset shadow. On hover the shadow collapses and the button translates into the cleared space.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/neobrutalism/buttons/2.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-neo-button-2
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="flex justify-center p-6 w-full">
<a
      class="border-2 border-black bg-white px-5 py-3 font-semibold text-black shadow-[4px_4px_0_0] hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0"
      href="#"
    >
      Click Here
    </a>
  </div>
</div>