In this section, we will create a Neo-brutalist UI button with Tailwind CSS. Neo-brutalism is an architectural style that emerged in the 1950s and gained popularity in the 1960s and 1970s. Many popular websites, such as Gumroad, employ Neo-brutalism.
Example 1
Create a Neo-brutalist button with hover effect using Tailwind CSS.
<button
class="px-4 py-2 text-white transition duration-200 -translate-y-1 bg-black rounded shadow-lg hover:border-black hover:border-r-2 hover:border-b-2 hover:bg-indigo-600">
Button
</button>
Example 2
Create a Neo-brutalist UI outline button with a border using Tailwind CSS.
<div class="space-x-4">
<button
class="px-5 py-2 font-medium border border-b-4 border-r-4 border-black rounded-lg shadow-lg hover:shadow-sm">
Outline Button
</button>
<button
class="px-5 py-2 font-medium text-green-900 border border-b-4 border-r-4 border-green-600 rounded-lg shadow-lg hover:shadow-sm">
Outline Button
</button>
<button
class="px-5 py-2 font-medium text-red-900 border border-b-4 border-r-4 border-red-600 rounded-lg shadow-lg hover:shadow-sm">
Outline Button
</button>
<button
class="px-5 py-2 font-medium text-blue-900 border border-b-4 border-r-4 border-blue-600 rounded-lg shadow-lg hover:shadow-sm">
Outline Button
</button>
</div>
Example 3
Create a Neo-brutalist UI animation button using Tailwind CSS.
<button
class="rounded-lg border-2 border-b-4 border-r-4 border-indigo-800 bg-white px-5 py-2 text-indigo-700 transition-all duration-300 ease-in-out hover:border-b-2 hover:border-r-2 hover:bg-indigo-700 hover:text-indigo-100">
Animation Buttons
</button>