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

331

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

Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

11 months ago

1.4k
Interactive Toggle Switch with Smooth Animation
A stylish toggle switch component built with Tailwind CSS and enhanced with minimal JavaScript. This toggle switch features smooth color transitions, dynamic text ("ON/OFF"), and a moving indicator ball, providing a visually appealing and functional design. Ideal for modern web interfaces where toggling functionality is required. Easily customizable for various use cases.

Author:
SHARIFUL ISLAM

10 months ago

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

Author:
Anonymous

2 years ago

12.3k
pasta
by salvator

Author:
Baraka Salvator

6 months ago

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

Author:
Anonymous

2 years ago

13.1k
modern portifolio
by salvator

Author:
Baraka Salvator

7 months ago

746
Primary secondary button pair

Author:
Iris Callahan

1 year ago

1.1k
Buttons

Author:
Maxim

11 months ago

1.5k
Animated Gradient Button Component
Button component with smooth hover effects and glass-morphism design. Features expanding gradient animation, rotating icon, and responsive layout. Perfect for call-to-action buttons, landing pages, and web applications. Easy copy-paste Tailwind CSS code ready for integration.

Author:
Homayoun

3 months ago

582
Github star button

Author:
Simon Scheffer

3 years ago

10.9k
Dioganal cuts Buttons

Author:
Adulik

2 years ago

7k
Buttons in pair

Author:
Bunny

2 years ago

11.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components