How to Neobrutalism UI Buttons in Tailwind CSS

In this section, we will create a Neo-brutalist UI button with Tailwind CSS. Neo-brutalism is an architectural style that emerged in the 1950s and gained popularity in the 1960s and 1970s. Many popular websites, such as Gumroad, employ Neo-brutalism.

Example 1

Create a Neo-brutalist button with hover effect using Tailwind CSS.

<button
    class="px-4 py-2 text-white transition duration-200 -translate-y-1 bg-black rounded shadow-lg hover:border-black hover:border-r-2 hover:border-b-2 hover:bg-indigo-600">
    Button
</button>
Neo-brutalist button

Example 2

Create a Neo-brutalist UI outline button with a border using Tailwind CSS.

<div class="space-x-4">
    <button
        class="px-5 py-2 font-medium border border-b-4 border-r-4 border-black rounded-lg shadow-lg hover:shadow-sm">
        Outline Button
    </button>
    <button
        class="px-5 py-2 font-medium text-green-900 border border-b-4 border-r-4 border-green-600 rounded-lg shadow-lg hover:shadow-sm">
        Outline Button
    </button>
    <button
        class="px-5 py-2 font-medium text-red-900 border border-b-4 border-r-4 border-red-600 rounded-lg shadow-lg hover:shadow-sm">
        Outline Button
    </button>
    <button
        class="px-5 py-2 font-medium text-blue-900 border border-b-4 border-r-4 border-blue-600 rounded-lg shadow-lg hover:shadow-sm">
        Outline Button
    </button>
</div>
tailwind neobrutalism ui outline button

Example 3

Create a Neo-brutalist UI animation button using Tailwind CSS.

<button
    class="rounded-lg border-2 border-b-4 border-r-4 border-indigo-800 bg-white px-5 py-2 text-indigo-700 transition-all duration-300 ease-in-out hover:border-b-2 hover:border-r-2 hover:bg-indigo-700 hover:text-indigo-100">
    Animation Buttons
</button>
tailwind neobrutalism button animation