Buttons

Neobrutalism-style button components built with Tailwind CSS. Featuring thick borders, hard shadows, and interactive hover states. Perfect for calls-to-action, forms, and navigation with a bold, retro design.

5/5 Dark Mode Updated: May 21, 2026

Base

markmead

<a
  class="border-2 border-black bg-white px-5 py-3 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0"
  href="#"
>
  Click Here
</a>

Base (Dark)

markmead

<a
  class="border-2 border-black bg-white px-5 py-3 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white dark:hover:bg-yellow-700 dark:focus:ring-yellow-600"
  href="#"
>
  Click Here
</a>

Pressed

markmead

<a
  class="border-2 border-black bg-white px-5 py-3 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0"
  href="#"
>
  Click Here
</a>

Pressed (Dark)

markmead

<a
  class="border-2 border-black bg-white px-5 py-3 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white dark:focus:ring-yellow-600"
  href="#"
>
  Click Here
</a>

Pressed with inset

markmead

<a
  class="border-2 border-black bg-white px-5 py-3 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:translate-1 hover:shadow-[-1px_-1px_0_0] focus:ring-2 focus:ring-yellow-300 focus:outline-0"
  href="#"
>
  Click Here
</a>

Pressed with inset (Dark)

markmead

<a
  class="border-2 border-black bg-white px-5 py-3 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:translate-1 hover:shadow-[-1px_-1px_0_0] focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white dark:focus:ring-yellow-600"
  href="#"
>
  Click Here
</a>

Underlined

markmead

<a
  class="relative 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>

Underlined (Dark)

markmead

<a
  class="relative 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 dark:bg-gray-900 dark:text-white dark:after:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600"
  href="#"
>
  <span class="relative z-10"> Click Here </span>
</a>

Double border

markmead

<a
  class="border-2 border-black bg-white px-5 py-3 font-semibold text-black ring-2 ring-black ring-offset-2 ring-offset-yellow-300 hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0"
  href="#"
>
  Click Here
</a>

Double border (Dark)

markmead

<a
  class="border-2 border-black bg-white px-5 py-3 font-semibold text-black ring-2 ring-black ring-offset-2 ring-offset-yellow-300 hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-gray-900 dark:text-white dark:ring-white dark:ring-offset-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-600"
  href="#"
>
  Click Here
</a>

View all neobrutalism components