DEV Community 👩‍💻👨‍💻

Cover image for Tailwind CSS Gradient Button Example
larainfo
larainfo

Posted on • Originally published at larainfo.com

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.

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

tailwind outline gradient button

Latest comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠