buttonsBeginnerhover
Neobrutalism Button
A bold-bordered button with a hard-shadow neobrutalism style.
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 Tailwind: solid background color (e.g. lime, pink, sky), thick black 2px border, and a sharp 4px solid black box-shadow offset to the bottom-right. On hover the button translates by the shadow offset and the shadow shrinks to 0 — making it look pressed in.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/neobrutalism/buttons/1.html
License: MIT
Surfaced via https://vibedex.io/components/hyperui-neo-button
-->
<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:bg-yellow-300 focus:ring-2 focus:ring-yellow-300 focus:outline-0"
href="#"
>
Click Here
</a>
</div>
</div>