Tailwind CSS Button hover effect by Kent Wayne Output View Horizontal Vertical HTML CSS JS Tidy <div class="relative flex gap-10 min-h-screen flex-col justify-center items-center overflow-hidden bg-gray-50 py-6 sm:py-12"> <button class="btn overflow-hidden relative w-64 bg-blue-500 text-white py-4 px-4 rounded-xl font-bold uppercase -- before:block before:absolute before:h-full before:w-full before:bg-blue-400 before:left-0 before:top-0 before:-translate-y-full hover:before:translate-y-0 before:transition-transform"> <span class="relative">Bouton</span> </button> <button class="btn overflow-hidden relative w-64 bg-indigo-500 text-white py-4 px-4 rounded-xl font-bold uppercase -- before:block before:absolute before:h-full before:w-1/2 before:rounded-full before:bg-indigo-400 before:top-0 before:left-1/4 before:transition-transform before:opacity-0 before:hover:opacity-100 hover:text-indigo-200 hover:before:animate-ping transition-all duration-300"> <span class="relative">Bouton</span> </button> <button class="btn-default overflow-hidden relative w-64 bg-orange-400 text-white py-4 px-4 rounded-xl font-bold uppercase transition-all duration-100 -- hover:shadow-md border border-stone-100 hover:bg-gradient-to-t hover:from-orange-100 before:to-orange-200 hover:-translate-y-[4px]"> <span class="relative">Bouton</span> </button> </div> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Button hover effect component in tailwind CSS with three different styles. Catagory Tailwind Tags CSS Button Effect Hover Effect Resource Add External Stylesheets and Script <script src="https://cdn.tailwindcss.com"></script>
