Back to Discover

Tailwind CSS Gradient Button Code Snippet

Amelia

Created Nov 03, 2025

192 views

0 likes

0 comments

0 forks

Export Fork Like

                                                                                                                                                                                                                                          <script src="https://cdn.tailwindcss.com"></script>
                                                                                                                                                                                                                                         <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
                                                                                                                                                                                                                                        <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
                                                                                                                                                                                                                                       <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
                                                                                                                                                                                                                                          <body class="min-h-screen bg-gray-50 flex items-center justify-center p-8">
                                                                                                                                                                                                                                              <div class="max-w-4xl w-full space-y-8">
                                                                                                                                                                                                                                                  <div class="text-center mb-12">
                                                                                                                                                                                                                                                      <h1 class="text-3xl font-bold text-gray-900 mb-2">Gradient Button Examples</h1>
                                                                                                                                                                                                                                                      <p class="text-gray-600">Minimal and professional gradient buttons with Tailwind CSS</p>
                                                                                                                                                                                                                                                  </div>

                                                                                                                                                                                                                                                  <!-- Button Examples Grid -->
                                                                                                                                                                                                                                                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                                                                                                                                                                                                                                                      <!-- Primary Gradient Button -->
                                                                                                                                                                                                                                                      <div class="bg-white p-6 rounded-lg shadow-sm">
                                                                                                                                                                                                                                                          <h3 class="text-sm font-semibold text-gray-700 mb-4">Primary Gradient</h3>
                                                                                                                                                                                                                                                          <button 
                                                                                                                                                                                                                                                              x-data="{ pressed: false }"
                                                                                                                                                                                                                                                              @click="pressed = true; setTimeout(() => pressed = false, 200)"
                                                                                                                                                                                                                                                              :class="pressed ? 'scale-95' : 'scale-100'"
                                                                                                                                                                                                                                                              class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105 flex items-center justify-center gap-2">
                                                                                                                                                                                                                                                              <ion-icon name="rocket-outline" class="text-xl"></ion-icon>
                                                                                                                                                                                                                                                              <span>Get Started</span>
                                                                                                                                                                                                                                                          </button>
                                                                                                                                                                                                                                                      </div>

                                                                                                                                                                                                                                                      <!-- Success Gradient Button -->
                                                                                                                                                                                                                                                      <div class="bg-white p-6 rounded-lg shadow-sm">
                                                                                                                                                                                                                                                          <h3 class="text-sm font-semibold text-gray-700 mb-4">Success Gradient</h3>
                                                                                                                                                                                                                                                          <button 
                                                                                                                                                                                                                                                              x-data="{ pressed: false }"
                                                                                                                                                                                                                                                              @click="pressed = true; setTimeout(() => pressed = false, 200)"
                                                                                                                                                                                                                                                              :class="pressed ? 'scale-95' : 'scale-100'"
                                                                                                                                                                                                                                                              class="w-full bg-gradient-to-r from-green-400 to-emerald-600 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105 flex items-center justify-center gap-2">
                                                                                                                                                                                                                                                              <ion-icon name="checkmark-circle-outline" class="text-xl"></ion-icon>
                                                                                                                                                                                                                                                              <span>Confirm</span>
                                                                                                                                                                                                                                                          </button>
                                                                                                                                                                                                                                                      </div>

                                                                                                                                                                                                                                                      <!-- Warm Gradient Button -->
                                                                                                                                                                                                                                                      <div class="bg-white p-6 rounded-lg shadow-sm">
                                                                                                                                                                                                                                                          <h3 class="text-sm font-semibold text-gray-700 mb-4">Warm Gradient</h3>
                                                                                                                                                                                                                                                          <button 
                                                                                                                                                                                                                                                              x-data="{ pressed: false }"
                                                                                                                                                                                                                                                              @click="pressed = true; setTimeout(() => pressed = false, 200)"
                                                                                                                                                                                                                                                              :class="pressed ? 'scale-95' : 'scale-100'"
                                                                                                                                                                                                                                                              class="w-full bg-gradient-to-r from-orange-400 to-pink-600 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105 flex items-center justify-center gap-2">
                                                                                                                                                                                                                                                              <ion-icon name="flame-outline" class="text-xl"></ion-icon>
                                                                                                                                                                                                                                                              <span>Trending</span>
                                                                                                                                                                                                                                                          </button>
                                                                                                                                                                                                                                                      </div>

                                                                                                                                                                                                                                                      <!-- Dark Gradient Button -->
                                                                                                                                                                                                                                                      <div class="bg-white p-6 rounded-lg shadow-sm">
                                                                                                                                                                                                                                                          <h3 class="text-sm font-semibold text-gray-700 mb-4">Dark Gradient</h3>
                                                                                                                                                                                                                                                          <button 
                                                                                                                                                                                                                                                              x-data="{ pressed: false }"
                                                                                                                                                                                                                                                              @click="pressed = true; setTimeout(() => pressed = false, 200)"
                                                                                                                                                                                                                                                              :class="pressed ? 'scale-95' : 'scale-100'"
                                                                                                                                                                                                                                                              class="w-full bg-gradient-to-r from-gray-700 to-gray-900 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105 flex items-center justify-center gap-2">
                                                                                                                                                                                                                                                              <ion-icon name="settings-outline" class="text-xl"></ion-icon>
                                                                                                                                                                                                                                                              <span>Settings</span>
                                                                                                                                                                                                                                                          </button>
                                                                                                                                                                                                                                                      </div>

                                                                                                                                                                                                                                                      <!-- Outline Gradient Button -->
                                                                                                                                                                                                                                                      <div class="bg-white p-6 rounded-lg shadow-sm">
                                                                                                                                                                                                                                                          <h3 class="text-sm font-semibold text-gray-700 mb-4">Outline Gradient</h3>
                                                                                                                                                                                                                                                          <button 
                                                                                                                                                                                                                                                              x-data="{ pressed: false }"
                                                                                                                                                                                                                                                              @click="pressed = true; setTimeout(() => pressed = false, 200)"
                                                                                                                                                                                                                                                              :class="pressed ? 'scale-95' : 'scale-100'"
                                                                                                                                                                                                                                                              class="w-full bg-white border-2 border-transparent bg-clip-padding relative font-medium px-6 py-3 rounded-lg shadow-sm hover:shadow-md transform transition-all duration-200 hover:scale-105 flex items-center justify-center gap-2"
                                                                                                                                                                                                                                                              style="background-image: linear-gradient(white, white), linear-gradient(to right, rgb(59, 130, 246), rgb(147, 51, 234)); background-origin: border-box; background-clip: padding-box, border-box;">
                                                                                                                                                                                                                                                              <ion-icon name="heart-outline" class="text-xl text-blue-500"></ion-icon>
                                                                                                                                                                                                                                                              <span class="bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent font-semibold">Like</span>
                                                                                                                                                                                                                                                          </button>
                                                                                                                                                                                                                                                      </div>

                                                                                                                                                                                                                                                      <!-- Animated Gradient Button -->
                                                                                                                                                                                                                                                      <div class="bg-white p-6 rounded-lg shadow-sm">
                                                                                                                                                                                                                                                          <h3 class="text-sm font-semibold text-gray-700 mb-4">Animated Gradient</h3>
                                                                                                                                                                                                                                                          <button 
                                                                                                                                                                                                                                                              x-data="{ pressed: false }"
                                                                                                                                                                                                                                                              @click="pressed = true; setTimeout(() => pressed = false, 200)"
                                                                                                                                                                                                                                                              :class="pressed ? 'scale-95' : 'scale-100'"
                                                                                                                                                                                                                                                              class="w-full bg-gradient-to-r from-cyan-500 via-blue-500 to-purple-600 bg-size-200 bg-pos-0 hover:bg-pos-100 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform transition-all duration-500 hover:scale-105 flex items-center justify-center gap-2"
                                                                                                                                                                                                                                                              style="background-size: 200% auto;">
                                                                                                                                                                                                                                                              <ion-icon name="sparkles-outline" class="text-xl"></ion-icon>
                                                                                                                                                                                                                                                              <span>Download</span>
                                                                                                                                                                                                                                                          </button>
                                                                                                                                                                                                                                                      </div>

                                                                                                                                                                                                                                                  </div>

                                                                                                                                                                                                                                                  <!-- Code Example -->
                                                                                                                                                                                                                                                  <div class="bg-gray-900 p-6 rounded-lg mt-8">
                                                                                                                                                                                                                                                      <h3 class="text-sm font-semibold text-gray-300 mb-3">Basic Usage</h3>
                                                                                                                                                                                                                                                      <code class="text-sm text-gray-300 font-mono">
                                                                                                                                                                                                                                                          <pre class="whitespace-pre-wrap">&lt;button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105"&gt;
                                                                                                                                                                                                                                            Button Text
                                                                                                                                                                                                                                          &lt;/button&gt;</pre>
                                                                                                                                                                                                                                    </code>
                                                                                                                                                                                                                                    </div>
                                                                                                                  </div>

body {
  margin: 0;
  padding: 20px;
  font-family: system-ui, -apple-system, sans-serif;
  background: #f5f5f5;
}

.container {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #333;
  margin-top: 0;
}

button {
  background: #000;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

console.log('Editor loaded!');

let clickCount = 0;

function handleClick() {
  clickCount++;
  const output = document.getElementById('output');
  output.innerHTML = `
    <h3>Clicked ${clickCount} time(s)!</h3>
    <p>Time: ${new Date().toLocaleTimeString()}</p>
  `;
  console.log(`Button clicked ${clickCount} times`);
}