buttonsBeginnerhover

Neo Button — Tagged

Neobrutalism button with notification badge.

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 neobrutalism button with a notification badge attached: thick black border, hard shadow, with a small numeric circle in the top-right corner indicating count.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/neobrutalism/buttons/4.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-neo-button-4
-->
<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="relative border-black bg-white px-5 py-3 font-semibold text-black after:absolute after:inset-x-0 after:bottom-0 after:h-1 after:bg-black hover:text-white hover:after:h-full focus:ring-2 focus:ring-yellow-300 focus:outline-0"
      href="#"
    >
      <span class="relative z-10"> Click Here </span>
    </a>
  </div>
</div>