Custom Buttons - Tailwind Component
Use Tailwind CSS custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
forms
Loading component...
67 lines
<div class="flex flex-col space-y-6 justify-center items-center mt-20">
<button
class='relative inline-flex items-center bg-gray-100 rounded-full hover:bg-[#ffc93c] group hover:text-gray-100 text-gray-500 py-3 px-6 text-xl font-bold overflow-visible shadow-2xl'>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
clip-rule="evenodd" />
</svg>
Update is Available
<div
class="absolute top-0 right-0 -mt-4 -mr-4 px-4 py-1 text-gray-100 bg-[#ffc93c] group-hover:bg-[#ff6f3c] rounded-full">
3</div>
</button>
<button
class="rounded inline-flex px-3 py-2 m-1 border-b-8 border-l-2 shadow-lg bg-[#a7d7c5] border-[#5c8d89] text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Download File
</button>
<div>
<div class="flex border-b-2 border-grey-dark rounded-lg overflow-hidden">
<button
class="inline-flex text-white bg-red-500 items-center shadow-border bg-blue hover:bg-blue-dark text-sm py-3 px-6 font-sans tracking-wide font-bold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
Star
</button>
<div class="bg-red-700 shadow-border p-3 text-gray-50 font-medium">
<div class="w-4 h-4">
31
</div>
</div>
</div>
</div>
<button class="border-2 border-yellow-500 flex flex-row justify-between px-4 w-60 py-2 text-yellow-500">
<p>Download File</p>
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</span>
</button>
<button class="rounded-full inline-flex px-3 py-2 m-1 shadow-lg bg-blue-600 text-white">
<span class="flex-shrink-0 inline-flex item-center mr-2 justify-center leading-none bg-blue-400 rounded-full ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 md:h-8 md:w-8 text-white" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clip-rule="evenodd" />
</svg>
</span>
Play music
</button>
<button
class="px-8 py-2 rounded-tr-3xl rounded-bl-3xl border-2 border-purple-400 bg-purple-300 text-purple-800 max-w-max shadow-sm hover:shadow-lg">Click,
please! :)</button>
</div>