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

476

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

Button with Bouncing Animation

Author:
Prashant

3 years ago

14.4k
tooltip Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.1k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

Author:
KULDEEP

7 months ago

938
Componentes para mi empresa
para mi empresa

Author:
BocchiChan

9 months ago

1k
Underline Hover Effect
Hover effect using after and before pseudo elements.

Author:
Carlos Adrian Garcia

2 years ago

9.4k
3D button with hover effect!

Author:
Laurits

3 years ago

18.2k
Game changer
by salvator

Author:
Baraka Salvator

8 months ago

836
Background gradient changing button
Automatic and continuously gradient-changing button. Cyclic color changing button.

Author:
Ingrid Schulz

2 years ago

11.2k
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
sachin senal

1 year ago

1.2k
Call to action buttons
Pair of active primary and secondary buttons. Elevated buttons w/ border bottom

Author:
Hyun-woo Cho

2 years ago

9.6k
Payment Button

Author:
Md. Tofayel islam

1 year ago

3.2k
Color changing button
changes the color of a button automatically and continuously

Author:
Anonymous

2 years ago

8.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components