buttonsBeginnerhover
Neobrutalism Icon Button
Neobrutalism button variant with a leading icon.
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 neobrutalism button with a leading icon: same hard-shadow + thick border treatment as the basic neo button, but with an SVG icon on the left of the label. Hover state collapses the shadow and translates the button into the cleared space — feels like pressing a real key.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/neobrutalism/buttons/3.html
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-neo-button-icon
-->
<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-[-1px_-1px_0_0] focus:ring-2 focus:ring-yellow-300 focus:outline-0"
href="#"
>
Click Here
</a>
</div>
</div>