In this section we will create Neo-brutalism UI button with tailwind css. Neo-brutalism is a style of architecture that emerged in the 1950s and became popular in the 1960s and 1970s. Many popular websites using Neo-brutalism like gumroad .
Learn Neobrutalism in Web Design with Tailwind CSS A Tutorial
Example 1
Neo-brutalism UI simple button with tailwind css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Neobrutalism UI Button with Tailwind CSS Example </title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center h-screen">
<div>
<button class="px-4 py-2 text-white bg-black rounded shadow-lg">Button</button>
</div>
</div>
</body>
</html>
black button neo-brutalism ui with tailwind css.
Neo-brutalism button with hover effect.
<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
Tailwind neobrutalism ui outline button with border class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Neobrutalism UI Outline Button </title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center h-screen">
<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>
</div>
</body>
</html>
tailwind neobrutalism ui outline button
Tailwind neobrutalism ui hover outline button with hover border class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Neobrutalism UI Hover Outline Button</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center h-screen">
<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 hover:border-b-2 hover:border-r-2">Hover
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 hover:border-b-2 hover:border-r-2">Hover
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 hover:border-b-2 hover:border-r-2">Hover
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 hover:border-b-2 hover:border-r-2">Hover
Outline Button</button>
</div>
</div>
</body>
</html>
tailwind neo brutalism ui hover outline button
Example 3
Tailwind neobrutalism ui animation button.
<button
class="px-5 py-2 text-indigo-700 transition-all duration-300 ease-in-out bg-white border-2 border-b-4 border-r-4 border-indigo-800 rounded-lg hover:text-indigo-100 hover:bg-indigo-700 hover:border-b-2 hover:border-r-2">Animation
Buttons</button>
