Home
Homayoun
Neo-Brutalism UI Button Collection - Bold CSS Button Styles withTailwind CSS

Neo-Brutalism UI Button Collection - Bold CSS Button Styles withTailwind CSS

Bold, chunky neo-brutalism buttons with thick borders and strong shadows for modern web design. Explore our collection of vibrant, high-contrast CSS buttons with hover effects and dark mode support.

This tailwind example is contributed by Homayoun, on 25-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Button

Author Homayoun

Fork Fullscreen

<div
            class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light-lg">
            <h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">Cyan Primary</h3>
            <button class="w-full bg-cyan-400 dark:bg-cyan-600 border-4 border-black dark:border-white px-6 py-3 font-black text-xl hover:bg-cyan-300 dark:hover:bg-cyan-500 active:shadow-none shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light transition-all text-gray-900 dark:text-white">
                    CREATE ACCOUNT
                </button>
        </div>

<div
            class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light-lg">
            <h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">Red Danger</h3>
            <button class="w-full bg-red-500 dark:bg-red-700 text-white border-4 border-black dark:border-white px-6 py-3 font-black text-xl hover:bg-red-400 dark:hover:bg-red-600 active:shadow-none shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light transition-all">
                    LOGOUT
                </button>
        </div>

<div
            class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light-lg">
            <h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">Yellow Warning</h3>
            <button class="w-full bg-yellow-300 dark:bg-yellow-500 border-4 border-black dark:border-white px-6 py-3 font-black text-xl hover:bg-yellow-200 dark:hover:bg-yellow-400 active:shadow-none shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light transition-all text-gray-900 dark:text-gray-900">
                    LOGIN NOW
                </button>
        </div>

<div
            class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light-lg">
            <h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">Green Success</h3>
            <button class="w-full bg-green-400 dark:bg-green-600 border-4 border-black dark:border-white px-6 py-3 font-black text-xl hover:bg-green-300 dark:hover:bg-green-500 active:shadow-none shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light transition-all text-gray-900 dark:text-white">
                    CONFIRM
                </button>
        </div>

<div
            class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light-lg">
            <h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">Pink Creative</h3>
            <button class="w-full bg-pink-400 dark:bg-pink-600 border-4 border-black dark:border-white px-6 py-3 font-black text-xl hover:bg-pink-300 dark:hover:bg-pink-500 active:shadow-none shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light transition-all text-gray-900 dark:text-white">
                    SUBSCRIBE
                </button>
        </div>

<div
            class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light-lg">
            <h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">Purple Premium</h3>
            <button class="w-full bg-purple-400 dark:bg-purple-600 text-white border-4 border-black dark:border-white px-6 py-3 font-black text-xl hover:bg-purple-300 dark:hover:bg-purple-500 active:shadow-none shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light transition-all">
                    UPGRADE
                </button>
        </div>

<div
            class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light-lg">
            <h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">Orange Energy</h3>
            <button class="w-full bg-orange-400 dark:bg-orange-600 border-4 border-black dark:border-white px-6 py-3 font-black text-xl hover:bg-orange-300 dark:hover:bg-orange-500 active:shadow-none shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light transition-all text-gray-900 dark:text-white">
                    GET STARTED
                </button>
        </div>

<div
            class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light-lg">
            <h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">Blue Info</h3>
            <button class="w-full bg-blue-400 dark:bg-blue-600 text-white border-4 border-black dark:border-white px-6 py-3 font-black text-xl hover:bg-blue-300 dark:hover:bg-blue-500 active:shadow-none shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light transition-all">
                    LEARN MORE
                </button>
        </div>

<div
            class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light-lg">
            <h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">Lime Fresh</h3>
            <button class="w-full bg-lime-400 dark:bg-lime-600 border-4 border-black dark:border-white px-6 py-3 font-black text-xl hover:bg-lime-300 dark:hover:bg-lime-500 active:shadow-none shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light transition-all text-gray-900 dark:text-gray-900">
                    ACTIVATE
                </button>
        </div>

<div
            class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light-lg">
            <h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">Indigo Deep</h3>
            <button class="w-full bg-indigo-400 dark:bg-indigo-600 text-white border-4 border-black dark:border-white px-6 py-3 font-black text-xl hover:bg-indigo-300 dark:hover:bg-indigo-500 active:shadow-none shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light transition-all">
                    DOWNLOAD
                </button>
        </div>

<div
            class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light-lg">
            <h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">Teal Cool</h3>
            <button class="w-full bg-teal-400 dark:bg-teal-600 border-4 border-black dark:border-white px-6 py-3 font-black text-xl hover:bg-teal-300 dark:hover:bg-teal-500 active:shadow-none shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light transition-all text-gray-900 dark:text-white">
                    EXPLORE
                </button>
        </div>

<div
            class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light-lg">
            <h3 class="font-bold text-lg mb-3 text-gray-900 dark:text-white">Rose Elegant</h3>
            <button class="w-full bg-rose-400 dark:bg-rose-600 text-white border-4 border-black dark:border-white px-6 py-3 font-black text-xl hover:bg-rose-300 dark:hover:bg-rose-500 active:shadow-none shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-neo-light transition-all">
                    SAVE NOW
                </button>
        </div>

</div>
</body>

Related Examples