Tailwind CSS Gradient Button Example
Tags: tailwindcss, webdev, tutorial, css
Published: 2022-08-10 15:52:00

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](https://larainfo.com/blogs/tailwind-css-gradient-button-example)

### Example 1
Tailwind CSS simple gradient button.
```html
<!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 ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/240yxb5dal7ntm1cffsc.png)

### Example 2
Tailwind CSS gradient button with hover effect.
```html
<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.
```html
<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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tc9hpljd8ql5t1rwrc2a.png)

### Example 4
Tailwind CSS outline gradient button.
```html
<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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l1jauhcn6hwvzclu5ap.png)