Tailwind CSS Gradient Button Example

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.


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>
tailwind simple gradient button

tailwind simple gradient button

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>
tailwind multiple gradient color

tailwind multiple gradient color

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>
tailwind outline gradient button

tailwind outline gradient button