In this section we will create tailwind gradient button, tailwind gradient button effect, gradient button with multiple colors, tailwind outline gradient button example with Tailwind CSS 3.
view
Example 1
Tailwind CSS simple gradient button.
<!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 Gradient Button Example </title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center h-screen">
<div class="flex space-x-6">
<button class="px-6 py-2 text-gray-100 rounded bg-gradient-to-r from-gray-600 to-gray-400">Button</button>
<button class="px-6 py-2 text-blue-100 rounded bg-gradient-to-r from-blue-600 to-blue-400">Button</button>
<button class="px-6 py-2 text-green-100 rounded bg-gradient-to-r from-green-600 to-green-400">Button</button>
<button class="px-6 py-2 text-red-100 rounded bg-gradient-to-r from-red-600 to-red-400">Button</button>
<button class="px-6 py-2 text-purple-100 rounded bg-gradient-to-r from-purple-600 to-purple-400">Button</button>
</div>
</div>
</body>
</html>
Example 2
Tailwind CSS gradient button with hover effect.
<button
class="px-6 py-2 text-gray-100 rounded bg-gradient-to-r from-gray-600 to-gray-400 hover:from-gray-600 hover:to-gray-800">Button</button>
<button
class="px-6 py-2 text-blue-100 rounded bg-gradient-to-r from-blue-600 to-blue-400 hover:from-blue-600 hover:to-blue-800">Button</button>
<button
class="px-6 py-2 text-green-100 rounded bg-gradient-to-r from-green-600 to-green-400 hover:from-green-600 hover:to-green-800">Button</button>
<button
class="px-6 py-2 text-red-100 rounded bg-gradient-to-r from-red-600 to-red-400 hover:from-red-600 hover:to-red-800">Button</button>
<button
class="px-6 py-2 text-purple-100 rounded bg-gradient-to-r from-purple-600 to-purple-400 hover:from-red-600 hover:to-red-800">Button</button>
Example 3
Tailwind CSS multiple gradient color button.
<button
class="px-6 py-2 text-gray-100 rounded bg-gradient-to-r from-green-300 via-blue-500 to-purple-600">Button</button>
<button
class="px-6 py-2 text-blue-700 rounded bg-gradient-to-r from-indigo-200 via-red-200 to-yellow-100">Button</button>
<button
class="px-6 py-2 text-green-100 rounded bg-gradient-to-r from-red-800 via-yellow-600 to-yellow-500">Button</button>
<button
class="px-6 py-2 text-red-100 rounded bg-gradient-to-r from-slate-900 via-purple-900 to-slate-900">Button</button>
Example 4
Tailwind CSS outline gradient button.
<div class="p-0.5 rounded bg-gradient-to-r from-blue-500 via-red-500 to-yellow-500">
<button class="px-6 py-2 text-blue-800 bg-white">Button</button>
</div>
<div class="p-1 rounded bg-gradient-to-r from-green-500 to-purple-500">
<button class="px-6 py-2 text-blue-800 bg-white">Button</button>
</div>
<div class="p-1 rounded bg-gradient-to-r from-rose-500 to-purple-500">
<button class="px-6 py-2 text-blue-800 bg-white">Button</button>
</div>
Top comments (0)