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.6k 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

Get the app section
Play store and App store buttons

Sophia Baker

3 years ago

10.2k
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
Button with hover effect
Button with light hover effect, responsive and suitable for light/dark mode.

isaSxm

1 year ago

897
scroll to top buton with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.7k
Elevated buttons

Leon Bachmann

3 years ago

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

Krishna Gudpalle

4 years ago

21.2k
Linkedin login/signup button

Shakti

3 years ago

13.6k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1.1k
Buy Me a Coffee CTA section

Sienna

3 years ago

10.5k
Animated button with rotating light beam
light beam rotates around the border

Anonymous

2 years ago

4k
Button

Lokesh H

2 months ago

269
Continue with Social Login - Continue with Google, LinkedIn, Twitter, Facebook, GitHub, Apple
Streamline your account creation and login process. Use our secure social login buttons to quickly sign in or register using your existing Google, LinkedIn, Twitter, Facebook, GitHub, or Apple account.

Homayoun

1 year ago

927