5 Different Style of Button

Gradient Button
outline button
neon button
Sliding Background
pulsing Button

This tailwind example is contributed by KULDEEP, on 04-Jul-2025. Component is made with Tailwind v3.4. It is responsive.

Button Button Group Other

Author KULDEEP

Tailwind v3.4 1.1k

Fork Fullscreen

<div class="bg-gray-100 flex flex-col items-center justify-center min-h-screen space-y-4">
  
  <button class="bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold py-3 px-6 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
    Gradient Button
  </button>

<button class="border-2 border-blue-500 text-blue-500 font-semibold py-3 px-6 rounded-lg relative overflow-hidden transition-all duration-300 hover:bg-blue-500 hover:text-white">
    Outline Button
  </button>

<button class="bg-gray-900 text-green-400 font-semibold py-3 px-6 rounded-lg shadow-md border-2 border-green-400 transition-shadow duration-300 hover:shadow-xl hover:scale-105">
    Neon Button
  </button>

<button class="relative bg-white text-black font-semibold py-3 px-6 rounded-lg overflow-hidden group">
    <span class="absolute inset-0 bg-indigo-500 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300 ease-in-out"></span>
    <span class="relative z-10">Sliding Background</span>
  </button>

<button class="bg-pink-500 text-white font-semibold py-3 px-6 rounded-lg animate-pulse hover:scale-105 transition-transform duration-300">
    Pulsing Button
  </button>
</div>