Neo-Brutalism UI Button Collection - Bold CSS Button Styles with Tailwind 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 v3.4. It is responsive. It supports dark mode.

Button

Author Homayoun

Tailwind v3.4 1.5k 6

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

pasta
by salvator

Baraka Salvator

1 year ago

1.3k
Game changer
by salvator

Baraka Salvator

1 year ago

1.5k
Dismissible Buttons

Manon Daniel

4 years ago

9.7k
Button pair

Piet Vriend

3 years ago

11.7k
futuristic button

Crimson

1 year ago

1.6k
Hamburger menu button with open/close animation
Open and close animation onclick requires alpineJs

Krishna Gudpalle

4 years ago

21.1k
Floating buttons examples
Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center

Livia Flores

3 years ago

26.4k
future ai robot
this an ai template by salvator

Baraka Salvator

1 year ago

1.7k
Button
Material Button

Akram Khan

2 years ago

3k
Botton hover
On hover Changes text

davilaarroyo07

2 years ago

7.5k
Continue with Discord button
Login with the Discord button for social login

Anonymous

2 years ago

3.6k
Contact us form
Contact us form

Geoffrey Callaghan

2 years ago

7.6k