<div class="flex flex-row justify-center items-center max-w-sm mx-auto">
<a href="#" class="font-bold leading-loose text-center w-32 p-2 rounded-lg transition duration-300 bg-cyan-400 text-cyan-900 hover:bg-cyan-500 focus:bg-cyan-500">Solid Button</a>
</div><div class="flex flex-row justify-center items-center max-w-sm mx-auto">
<a href="#" class="border border-current font-bold leading-loose text-center py-2 px-4 transition duration-300 bg-transparent text-gray-50 text-gray-50 hover:bg-gray-50 hover:text-gray-900 focus:bg-gray-50 focus:text-gray-900">Ghost Button</a>
</div><div class="flex flex-row justify-center items-center max-w-sm mx-auto">
<button aria-label="Toggle menu" class="relative flex flex-col justify-between w-8 h-6 focus:outline-none">
<div class="relative rounded-lg bg-current w-8 h-1 transform transition-transform duration-200 ease-in-out"></div>
<div class="relative rounded-lg bg-current w-8 h-1 my-auto transition-opacity duration-200"></div>
<div class="relative rounded-lg bg-current w-8 h-1 transform transition-transform duration-200 ease-in-out"></div>
</button>
</div><div class="flex flex-row justify-center items-center max-w-sm mx-auto">
<a href="#" class="font-bold leading-loose text-center px-4 py-2 rounded-lg transition duration-300 bg-gradient-to-tr from-cyan-500 to-teal-400 hover:from-cyan-600 hover:to-teal-500 text-gray-900">Gradient basic button</a>
</div><div class="flex flex-row justify-center items-center max-w-sm mx-auto">
<a href="#" class="group relative font-bold leading-loose text-center py-2 px-4 rounded-lg overflow-hidden text-gray-900">
<div class="absolute h-full w-full top-0 left-0 right-0 bottom-0 transition duration-300 z-10 group-hover:opacity-0 group-focus:opacity-0 bg-gradient-to-tr from-cyan-500 to-teal-400"></div>
<div class="absolute h-full w-full top-0 left-0 right-0 bottom-0 transition duration-300 z-0 opacity-100 group-hover:opacity-100 group-focus:opacity-100 bg-gradient-to-tl from-cyan-600 to-teal-500"></div>
<span class="relative z-20">Gradient hover transition</span>
</a>
</div>