Tailwind Buttons - WebDevTales

18 Tailwind Buttons

Modern, responsive Tailwind Buttons for sleek UI design

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors duration-200">
    Primary
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="border-2 border-blue-500 text-blue-500 px-6 py-2 rounded-lg hover:bg-blue-500 hover:text-white transition-colors duration-200">
    Outline
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-2 rounded-lg hover:from-purple-600 hover:to-pink-600 transition-all duration-300">
    Gradient
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="bg-red-500 text-white px-6 py-2 rounded-lg shadow-lg hover:shadow-xl hover:bg-red-600 transition-all duration-300">
    Shadow
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition-colors duration-200 flex items-center">
    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    Icon
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="bg-indigo-500 text-white px-6 py-2 rounded-full hover:bg-indigo-600 transition-colors duration-200">
    Pill
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="bg-yellow-500 text-white px-6 py-2 rounded-lg hover:bg-yellow-600 transition-all duration-300 transform hover:scale-105">
    Animated
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-400 min-h-screen flex items-center justify-center">
  <button class="bg-white/20 backdrop-blur-md text-white px-6 py-2 rounded-lg border border-white/10 hover:bg-white/30 transition-colors duration-200">
    Glass
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="bg-blue-500 text-white px-6 py-2 rounded-lg shadow-lg hover:shadow-xl hover:bg-blue-600 active:translate-y-1 transition-all duration-200">
    3D Effect
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="bg-purple-500 text-white px-6 py-2 rounded-lg hover:bg-purple-600 transition-colors duration-200 flex items-center justify-center">
    <svg class="animate-spin h-5 w-5 mr-2" viewBox="0 0 24 24">
      <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16z" fill="currentColor" />
      <path d="M12 4a8 8 0 018 8h-2a6 6 0 00-6-6V4z" fill="currentColor" />
    </svg>
    Loading...
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="bg-gray-100 text-gray-700 px-8 py-3 rounded-lg shadow-[9px_9px_16px_rgba(163,177,198,0.6),-9px_-9px_16px_rgba(255,255,255,0.5)] hover:shadow-[inset_6px_6px_10px_rgba(163,177,198,0.6),inset_-6px_-6px_10px_rgba(255,255,255,0.5)] transition-all duration-300">
    Neumorphic
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="bg-white text-gray-700 px-8 py-3 rounded-lg border-2 border-transparent bg-clip-padding hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:text-white transition-all duration-300">
    Gradient
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="relative text-gray-700 px-8 py-3 text-lg font-semibold after:absolute after:left-1/2 after:-bottom-1 after:h-0.5 after:w-0 after:bg-blue-500 after:transition-all after:duration-300 after:transform after:-translate-x-1/2 hover:after:w-full">
    Hover Underline
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="bg-blue-500 text-white px-8 py-3 rounded-lg shadow-[0_0_10px_#3B82F6,0_0_20px_#3B82F6] hover:shadow-[0_0_20px_#3B82F6,0_0_40px_#3B82F6] transition-all duration-300">
    Glow Hover
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="bg-blue-500 text-white px-8 py-3 rounded-lg shadow-[0_5px_0_#1D4ED8] active:translate-y-1 active:shadow-[0_2px_0_#1D4ED8] transition-all duration-100">
    3D Press
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="relative bg-cyan-800 text-white px-8 py-3 rounded-lg overflow-hidden before:absolute before:top-1/2 before:left-1/2 before:w-[300%] before:h-[300%] before:bg-white/30 before:transition-all before:duration-500 before:transform before:-translate-x-1/2 before:-translate-y-1/2 before:rotate-45 hover:before:w-0 hover:before:h-0">
    Liquid Fill
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <button class="relative bg-red-500 text-white px-8 py-3  overflow-hidden before:absolute before:top-1/2 before:left-1/2 before:w-2.5 before:h-2.5 before:bg-white/50 before:rounded-full before:opacity-0 before:transition-all before:duration-500 before:transform before:-translate-x-1/2 before:-translate-y-1/2 hover:before:w-[200px] hover:before:h-[200px] hover:before:opacity-100">
    Particle Effect
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gradient-to-r from-purple-500 to-pink-500 min-h-screen flex items-center justify-center">
  <button class="bg-white/20 backdrop-blur-md text-white px-8 py-3 rounded-lg border border-white/10 hover:bg-white/30 transition-all duration-300">
    Glassmorphism
  </button>
</body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-whitesmoke min-h-screen flex items-center justify-center">
  <button
  class="relative w-48 h-14 bg-white/10 backdrop-blur-md text-gray text-xl font-semibold rounded-2xl border border-white/20 shadow-lg transition-all duration-500 hover:shadow-xl hover:shadow-cyan-500/50"
>
  <span class="absolute left-4 top-1/2 -translate-y-1/2 opacity-50 group-hover:opacity-100 transition-opacity duration-500"
    >🔹</span
  >
  Click Me
</button>


</body>
`

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-whitesmoke min-h-screen flex items-center justify-center">
  <button
  class="relative w-48 h-14 rounded-2xl bg-gray-800 text-white font-semibold text-xl overflow-hidden group flex items-center justify-center gap-2 transition-all duration-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/50"
>
  <span class="group-hover:-translate-x-2 transition-transform duration-500">
    <i class="fas fa-bolt text-lg"></i>
  </span>
  Click Here
</button>




</body>
`

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

18 Tailwind Buttons

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code