Button Gradient - Tailwind Component
The Tailwind CSS Gradient Buttons give you a set of different call to action buttons.
button
Loading component...
29 lines
<div class="flex h-screen">
<div class="m-auto">
<div class="text-center mb-5">
<p class="text-3xl text-gray-700 font-bold">Gradient Button</p>
</div>
<div class="flex flex-col space-y-6">
<div>
<button
class="p-2 pl-5 pr-5 bg-gradient-to-r from-blue-400 to-indigo-500 text-gray-100 text-lg rounded-lg focus:border-4 border-blue-300">Primary</button>
<button
class="p-2 pl-5 pr-5 bg-gradient-to-r from-yellow-500 to-yellow-400 text-gray-100 text-lg rounded-lg focus:border-4 border-yellow-300">Warning</button>
<button
class="p-2 pl-5 pr-5 bg-gradient-to-b from-red-600 to-pink-500 text-gray-100 text-lg rounded-lg focus:border-4 border-red-300">Hazard</button>
<button
class="p-2 pl-5 pr-5 bg-gradient-to-b from-green-400 to-green-700 text-gray-100 text-lg rounded-lg focus:border-4 border-green-300">Success</button>
</div>
<div>
<button
class="p-2 pl-5 pr-5 bg-transparent border-2 border-blue-500 text-blue-500 text-lg rounded-lg hover:bg-gradient-to-r hover:from-blue-400 hover:to-indigo-500 hover:text-gray-100 focus:border-blue-300">Primary</button>
<button
class="p-2 pl-5 pr-5 bg-transparent border-2 border-yellow-500 text-yellow-500 text-lg rounded-lg hover:bg-gradient-to-r hover:from-yellow-500 hover:to-yellow-400 hover:text-gray-100 focus:border-4 focus:border-yellow-300">Warning</button>
<button
class="p-2 pl-5 pr-5 bg-transparent border-2 border-red-500 text-red-500 text-lg rounded-lg hover:bg-gradient-to-b hover:from-red-600 hover:to-pink-500 hover:text-gray-100 focus:border-4 focus:border-red-300">Hazard</button>
<button
class="p-2 pl-5 pr-5 bg-transparent border-2 border-green-500 text-green-500 text-lg rounded-lg hover:bg-gradient-to-b hover:from-green-400 hover:to-green-700 hover:text-gray-100 focus:border-4 focus:border-green-300">Success</button>
</div>
</div>
</div>
</div>