Button Components

Beautiful, responsive button components built with TailwindCSS. Perfect for forms, CTAs, and interactive elements. Copy, paste, and customize for React, Vue, or HTML.

1. Modern Gradient Button

Eye-catching gradient button with smooth hover animations and multiple variants.

<!-- Primary Gradient Button -->
<button class="px-6 py-3 bg-gradient-to-r from-violet to-purple-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl hover:from-violet/90 hover:to-purple-600/90 transform hover:-translate-y-0.5 transition-all duration-200 flex items-center gap-2">
    Get Started
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
    </svg>
</button>

<!-- Secondary Gradient Button -->
<button class="px-6 py-3 bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl hover:from-emerald-600 hover:to-teal-700 transform hover:-translate-y-0.5 transition-all duration-200">
    Download
</button>

<!-- Outline Gradient Button -->
<button class="px-6 py-3 border-2 border-violet text-violet font-semibold rounded-lg hover:bg-gradient-to-r hover:from-violet hover:to-purple-600 hover:text-white hover:border-transparent transform hover:-translate-y-0.5 transition-all duration-200">
    Learn More
</button>
<template>
  <div class="flex flex-wrap gap-4">
    <!-- Primary Gradient Button -->
    <button 
      @click="handlePrimary"
      class="px-6 py-3 bg-gradient-to-r from-violet to-purple-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl hover:from-violet/90 hover:to-purple-600/90 transform hover:-translate-y-0.5 transition-all duration-200 flex items-center gap-2"
    >
      Get Started
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
      </svg>
    </button>

    <!-- Secondary Gradient Button -->
    <button 
      @click="handleSecondary"
      class="px-6 py-3 bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl hover:from-emerald-600 hover:to-teal-700 transform hover:-translate-y-0.5 transition-all duration-200"
    >
      Download
    </button>

    <!-- Outline Gradient Button -->
    <button 
      @click="handleOutline"
      class="px-6 py-3 border-2 border-violet text-violet font-semibold rounded-lg hover:bg-gradient-to-r hover:from-violet hover:to-purple-600 hover:text-white hover:border-transparent transform hover:-translate-y-0.5 transition-all duration-200"
    >
      Learn More
    </button>
  </div>
</template>

<script setup>
const handlePrimary = () => {
  console.log('Primary button clicked')
}

const handleSecondary = () => {
  console.log('Secondary button clicked')
}

const handleOutline = () => {
  console.log('Outline button clicked')
}
</script>
import React from 'react'

const GradientButtons = () => {
  const handlePrimary = () => {
    console.log('Primary button clicked')
  }

  const handleSecondary = () => {
    console.log('Secondary button clicked')
  }

  const handleOutline = () => {
    console.log('Outline button clicked')
  }

  return (
    <div className="flex flex-wrap gap-4">
      {/* Primary Gradient Button */}
      <button 
        onClick={handlePrimary}
        className="px-6 py-3 bg-gradient-to-r from-violet to-purple-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl hover:from-violet/90 hover:to-purple-600/90 transform hover:-translate-y-0.5 transition-all duration-200 flex items-center gap-2"
      >
        Get Started
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>

      {/* Secondary Gradient Button */}
      <button 
        onClick={handleSecondary}
        className="px-6 py-3 bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl hover:from-emerald-600 hover:to-teal-700 transform hover:-translate-y-0.5 transition-all duration-200"
      >
        Download
      </button>

      {/* Outline Gradient Button */}
      <button 
        onClick={handleOutline}
        className="px-6 py-3 border-2 border-violet text-violet font-semibold rounded-lg hover:bg-gradient-to-r hover:from-violet hover:to-purple-600 hover:text-white hover:border-transparent transform hover:-translate-y-0.5 transition-all duration-200"
      >
        Learn More
      </button>
    </div>
  )
}

export default GradientButtons

2. Neobrutalist Buttons

Bold, high-contrast buttons with thick borders and strong shadows perfect for modern designs.

<!-- Primary Neobrutalist Button -->
<button class="px-6 py-3 bg-violet text-white font-black border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-150 uppercase tracking-wider">
    Click Me
</button>

<!-- Warning Neobrutalist Button -->
<button class="px-6 py-3 bg-[#ffde59] text-black font-black border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-150 uppercase tracking-wider">
    Warning
</button>

<!-- Danger Neobrutalist Button -->
<button class="px-6 py-3 bg-[#ff5c5c] text-white font-black border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-150 uppercase tracking-wider flex items-center gap-2">
    Delete
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
    </svg>
</button>
<template>
  <div class="flex flex-wrap gap-4">
    <!-- Primary Neobrutalist Button -->
    <button 
      @click="handlePrimary"
      class="px-6 py-3 bg-violet text-white font-black border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-150 uppercase tracking-wider"
    >
      Click Me
    </button>

    <!-- Warning Neobrutalist Button -->
    <button 
      @click="handleWarning"
      class="px-6 py-3 bg-[#ffde59] text-black font-black border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-150 uppercase tracking-wider"
    >
      Warning
    </button>

    <!-- Danger Neobrutalist Button -->
    <button 
      @click="handleDelete"
      class="px-6 py-3 bg-[#ff5c5c] text-white font-black border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-150 uppercase tracking-wider flex items-center gap-2"
    >
      Delete
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
      </svg>
    </button>
  </div>
</template>

<script setup>
const handlePrimary = () => {
  console.log('Primary neobrutalist button clicked')
}

const handleWarning = () => {
  console.log('Warning button clicked')
}

const handleDelete = () => {
  console.log('Delete button clicked')
}
</script>
import React from 'react'

const NeobrutalistButtons = () => {
  const handlePrimary = () => {
    console.log('Primary neobrutalist button clicked')
  }

  const handleWarning = () => {
    console.log('Warning button clicked')
  }

  const handleDelete = () => {
    console.log('Delete button clicked')
  }

  return (
    <div className="flex flex-wrap gap-4">
      {/* Primary Neobrutalist Button */}
      <button 
        onClick={handlePrimary}
        className="px-6 py-3 bg-violet text-white font-black border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-150 uppercase tracking-wider"
      >
        Click Me
      </button>

      {/* Warning Neobrutalist Button */}
      <button 
        onClick={handleWarning}
        className="px-6 py-3 bg-[#ffde59] text-black font-black border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-150 uppercase tracking-wider"
      >
        Warning
      </button>

      {/* Danger Neobrutalist Button */}
      <button 
        onClick={handleDelete}
        className="px-6 py-3 bg-[#ff5c5c] text-white font-black border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-150 uppercase tracking-wider flex items-center gap-2"
      >
        Delete
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
        </svg>
      </button>
    </div>
  )
}

export default NeobrutalistButtons

3. Glassmorphism Buttons

Modern glass-effect buttons with blur, transparency, and subtle animations.

<!-- Primary Glass Button -->
<button class="px-6 py-3 bg-white/20 backdrop-blur-lg border border-white/30 text-white font-medium rounded-xl shadow-lg hover:bg-white/30 hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300">
    Get Started
</button>

<!-- Secondary Glass Button -->
<button class="px-6 py-3 bg-black/20 backdrop-blur-lg border border-white/20 text-white font-medium rounded-xl shadow-lg hover:bg-black/30 hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300 flex items-center gap-2">
    Download
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
    </svg>
</button>

<!-- Outline Glass Button -->
<button class="px-6 py-3 bg-transparent backdrop-blur-lg border-2 border-white/50 text-white font-medium rounded-xl shadow-lg hover:bg-white/20 hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300">
    Learn More
</button>
<template>
  <div class="flex flex-wrap gap-4">
    <!-- Primary Glass Button -->
    <button 
      @click="handlePrimary"
      class="px-6 py-3 bg-white/20 backdrop-blur-lg border border-white/30 text-white font-medium rounded-xl shadow-lg hover:bg-white/30 hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300"
    >
      Get Started
    </button>

    <!-- Secondary Glass Button -->
    <button 
      @click="handleDownload"
      class="px-6 py-3 bg-black/20 backdrop-blur-lg border border-white/20 text-white font-medium rounded-xl shadow-lg hover:bg-black/30 hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300 flex items-center gap-2"
    >
      Download
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
      </svg>
    </button>

    <!-- Outline Glass Button -->
    <button 
      @click="handleLearnMore"
      class="px-6 py-3 bg-transparent backdrop-blur-lg border-2 border-white/50 text-white font-medium rounded-xl shadow-lg hover:bg-white/20 hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300"
    >
      Learn More
    </button>
  </div>
</template>

<script setup>
const handlePrimary = () => {
  console.log('Glass primary button clicked')
}

const handleDownload = () => {
  console.log('Glass download button clicked')
}

const handleLearnMore = () => {
  console.log('Glass learn more button clicked')
}
</script>
import React from 'react'

const GlassmorphismButtons = () => {
  const handlePrimary = () => {
    console.log('Glass primary button clicked')
  }

  const handleDownload = () => {
    console.log('Glass download button clicked')
  }

  const handleLearnMore = () => {
    console.log('Glass learn more button clicked')
  }

  return (
    <div className="flex flex-wrap gap-4">
      {/* Primary Glass Button */}
      <button 
        onClick={handlePrimary}
        className="px-6 py-3 bg-white/20 backdrop-blur-lg border border-white/30 text-white font-medium rounded-xl shadow-lg hover:bg-white/30 hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300"
      >
        Get Started
      </button>

      {/* Secondary Glass Button */}
      <button 
        onClick={handleDownload}
        className="px-6 py-3 bg-black/20 backdrop-blur-lg border border-white/20 text-white font-medium rounded-xl shadow-lg hover:bg-black/30 hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300 flex items-center gap-2"
      >
        Download
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
      </button>

      {/* Outline Glass Button */}
      <button 
        onClick={handleLearnMore}
        className="px-6 py-3 bg-transparent backdrop-blur-lg border-2 border-white/50 text-white font-medium rounded-xl shadow-lg hover:bg-white/20 hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300"
      >
        Learn More
      </button>
    </div>
  )
}

export default GlassmorphismButtons

4. Minimal Clean Buttons

Ultra-minimal buttons with subtle hover effects and clean typography, perfect for modern interfaces.

<!-- Primary Minimal Button -->
<button class="px-6 py-2.5 text-gray-900 font-medium rounded-lg hover:bg-gray-100 transition-colors duration-200">
    Continue
</button>

<!-- Secondary Minimal Button -->
<button class="px-6 py-2.5 text-gray-600 font-medium rounded-lg hover:text-gray-900 hover:bg-gray-50 transition-colors duration-200">
    Cancel
</button>

<!-- Underline Button -->
<button class="px-2 py-2.5 text-violet font-medium relative group transition-colors duration-200">
    Learn more
    <span class="absolute bottom-1 left-2 right-2 h-0.5 bg-violet scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
</button>

<!-- Icon Button -->
<button class="p-2.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
    </svg>
</button>
<template>
  <div class="flex flex-wrap gap-4">
    <!-- Primary Minimal Button -->
    <button 
      @click="handleContinue"
      class="px-6 py-2.5 text-gray-900 font-medium rounded-lg hover:bg-gray-100 transition-colors duration-200"
    >
      Continue
    </button>

    <!-- Secondary Minimal Button -->
    <button 
      @click="handleCancel"
      class="px-6 py-2.5 text-gray-600 font-medium rounded-lg hover:text-gray-900 hover:bg-gray-50 transition-colors duration-200"
    >
      Cancel
    </button>

    <!-- Underline Button -->
    <button 
      @click="handleLearnMore"
      class="px-2 py-2.5 text-violet font-medium relative group transition-colors duration-200"
    >
      Learn more
      <span class="absolute bottom-1 left-2 right-2 h-0.5 bg-violet scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
    </button>

    <!-- Icon Button -->
    <button 
      @click="handleAdd"
      class="p-2.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
      </svg>
    </button>
  </div>
</template>

<script setup>
const handleContinue = () => {
  console.log('Continue clicked')
}

const handleCancel = () => {
  console.log('Cancel clicked')
}

const handleLearnMore = () => {
  console.log('Learn more clicked')
}

const handleAdd = () => {
  console.log('Add clicked')
}
</script>
import React from 'react'

const MinimalButtons = () => {
  const handleContinue = () => {
    console.log('Continue clicked')
  }

  const handleCancel = () => {
    console.log('Cancel clicked')
  }

  const handleLearnMore = () => {
    console.log('Learn more clicked')
  }

  const handleAdd = () => {
    console.log('Add clicked')
  }

  return (
    <div className="flex flex-wrap gap-4">
      {/* Primary Minimal Button */}
      <button 
        onClick={handleContinue}
        className="px-6 py-2.5 text-gray-900 font-medium rounded-lg hover:bg-gray-100 transition-colors duration-200"
      >
        Continue
      </button>

      {/* Secondary Minimal Button */}
      <button 
        onClick={handleCancel}
        className="px-6 py-2.5 text-gray-600 font-medium rounded-lg hover:text-gray-900 hover:bg-gray-50 transition-colors duration-200"
      >
        Cancel
      </button>

      {/* Underline Button */}
      <button 
        onClick={handleLearnMore}
        className="px-2 py-2.5 text-violet font-medium relative group transition-colors duration-200"
      >
        Learn more
        <span className="absolute bottom-1 left-2 right-2 h-0.5 bg-violet scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
      </button>

      {/* Icon Button */}
      <button 
        onClick={handleAdd}
        className="p-2.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200"
      >
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
      </button>
    </div>
  )
}

export default MinimalButtons

5. Soft UI Buttons

Trendy soft UI design with subtle shadows and elevated appearance, popular in modern apps.

<!-- Primary Soft Button -->
<button class="px-8 py-3 bg-violet text-white font-medium rounded-2xl shadow-lg shadow-violet/25 hover:shadow-xl hover:shadow-violet/30 hover:-translate-y-0.5 transition-all duration-300">
    Get Started
</button>

<!-- Light Soft Button -->
<button class="px-8 py-3 bg-white text-gray-700 font-medium rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300">
    Learn More
</button>

<!-- Pressed Effect Button -->
<button class="px-8 py-3 bg-gray-100 text-gray-700 font-medium rounded-2xl shadow-inner hover:bg-gray-50 active:shadow-inner active:bg-gray-200 transition-all duration-200">
    Pressed
</button>

<!-- Icon Soft Button -->
<button class="p-4 bg-white text-violet rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
    </svg>
</button>
<template>
  <div class="flex flex-wrap gap-4">
    <!-- Primary Soft Button -->
    <button 
      @click="handleStart"
      class="px-8 py-3 bg-violet text-white font-medium rounded-2xl shadow-lg shadow-violet/25 hover:shadow-xl hover:shadow-violet/30 hover:-translate-y-0.5 transition-all duration-300"
    >
      Get Started
    </button>

    <!-- Light Soft Button -->
    <button 
      @click="handleLearn"
      class="px-8 py-3 bg-white text-gray-700 font-medium rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300"
    >
      Learn More
    </button>

    <!-- Pressed Effect Button -->
    <button 
      @click="handlePressed"
      class="px-8 py-3 bg-gray-100 text-gray-700 font-medium rounded-2xl shadow-inner hover:bg-gray-50 active:shadow-inner active:bg-gray-200 transition-all duration-200"
    >
      Pressed
    </button>

    <!-- Icon Soft Button -->
    <button 
      @click="handleLike"
      class="p-4 bg-white text-violet rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
      </svg>
    </button>
  </div>
</template>

<script setup>
const handleStart = () => {
  console.log('Get Started clicked')
}

const handleLearn = () => {
  console.log('Learn More clicked')
}

const handlePressed = () => {
  console.log('Pressed button clicked')
}

const handleLike = () => {
  console.log('Like button clicked')
}
</script>
import React from 'react'

const SoftUIButtons = () => {
  const handleStart = () => {
    console.log('Get Started clicked')
  }

  const handleLearn = () => {
    console.log('Learn More clicked')
  }

  const handlePressed = () => {
    console.log('Pressed button clicked')
  }

  const handleLike = () => {
    console.log('Like button clicked')
  }

  return (
    <div className="flex flex-wrap gap-4">
      {/* Primary Soft Button */}
      <button 
        onClick={handleStart}
        className="px-8 py-3 bg-violet text-white font-medium rounded-2xl shadow-lg shadow-violet/25 hover:shadow-xl hover:shadow-violet/30 hover:-translate-y-0.5 transition-all duration-300"
      >
        Get Started
      </button>

      {/* Light Soft Button */}
      <button 
        onClick={handleLearn}
        className="px-8 py-3 bg-white text-gray-700 font-medium rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300"
      >
        Learn More
      </button>

      {/* Pressed Effect Button */}
      <button 
        onClick={handlePressed}
        className="px-8 py-3 bg-gray-100 text-gray-700 font-medium rounded-2xl shadow-inner hover:bg-gray-50 active:shadow-inner active:bg-gray-200 transition-all duration-200"
      >
        Pressed
      </button>

      {/* Icon Soft Button */}
      <button 
        onClick={handleLike}
        className="p-4 bg-white text-violet rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300"
      >
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </svg>
      </button>
    </div>
  )
}

export default SoftUIButtons

6. Floating Action Buttons

Modern floating action buttons with ripple effects and material design inspiration.

<!-- Primary FAB -->
<button class="w-14 h-14 bg-violet text-white rounded-full shadow-lg hover:shadow-xl hover:scale-110 active:scale-95 transition-all duration-200 flex items-center justify-center relative overflow-hidden group">
    <svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
    </svg>
    <span class="absolute inset-0 bg-white/20 rounded-full scale-0 group-hover:scale-100 transition-transform duration-300"></span>
</button>

<!-- Extended FAB -->
<button class="px-6 h-14 bg-violet text-white rounded-full shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 transition-all duration-200 flex items-center gap-3 relative overflow-hidden group">
    <svg class="w-5 h-5 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
    </svg>
    <span class="font-medium z-10">Create</span>
    <span class="absolute inset-0 bg-white/20 rounded-full scale-0 group-hover:scale-100 transition-transform duration-300"></span>
</button>

<!-- Secondary FAB -->
<button class="w-12 h-12 bg-white text-gray-700 rounded-full shadow-lg hover:shadow-xl hover:scale-110 active:scale-95 transition-all duration-200 flex items-center justify-center border border-gray-200">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
    </svg>
</button>

<!-- Mini FAB -->
<button class="w-10 h-10 bg-emerald-500 text-white rounded-full shadow-lg hover:shadow-xl hover:scale-110 active:scale-95 transition-all duration-200 flex items-center justify-center">
    <svg class="w-4 h-4" 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>
</button>
<template>
  <div class="flex flex-wrap gap-4">
    <!-- Primary FAB -->
    <button 
      @click="handleAdd"
      class="w-14 h-14 bg-violet text-white rounded-full shadow-lg hover:shadow-xl hover:scale-110 active:scale-95 transition-all duration-200 flex items-center justify-center relative overflow-hidden group"
    >
      <svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
      </svg>
      <span class="absolute inset-0 bg-white/20 rounded-full scale-0 group-hover:scale-100 transition-transform duration-300"></span>
    </button>

    <!-- Extended FAB -->
    <button 
      @click="handleCreate"
      class="px-6 h-14 bg-violet text-white rounded-full shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 transition-all duration-200 flex items-center gap-3 relative overflow-hidden group"
    >
      <svg class="w-5 h-5 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
      </svg>
      <span class="font-medium z-10">Create</span>
      <span class="absolute inset-0 bg-white/20 rounded-full scale-0 group-hover:scale-100 transition-transform duration-300"></span>
    </button>

    <!-- Secondary FAB -->
    <button 
      @click="handleFavorite"
      class="w-12 h-12 bg-white text-gray-700 rounded-full shadow-lg hover:shadow-xl hover:scale-110 active:scale-95 transition-all duration-200 flex items-center justify-center border border-gray-200"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
      </svg>
    </button>

    <!-- Mini FAB -->
    <button 
      @click="handleCheck"
      class="w-10 h-10 bg-emerald-500 text-white rounded-full shadow-lg hover:shadow-xl hover:scale-110 active:scale-95 transition-all duration-200 flex items-center justify-center"
    >
      <svg class="w-4 h-4" 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>
    </button>
  </div>
</template>

<script setup>
const handleAdd = () => {
  console.log('Add FAB clicked')
}

const handleCreate = () => {
  console.log('Create FAB clicked')
}

const handleFavorite = () => {
  console.log('Favorite FAB clicked')
}

const handleCheck = () => {
  console.log('Check FAB clicked')
}
</script>
import React from 'react'

const FloatingActionButtons = () => {
  const handleAdd = () => {
    console.log('Add FAB clicked')
  }

  const handleCreate = () => {
    console.log('Create FAB clicked')
  }

  const handleFavorite = () => {
    console.log('Favorite FAB clicked')
  }

  const handleCheck = () => {
    console.log('Check FAB clicked')
  }

  return (
    <div className="flex flex-wrap gap-4">
      {/* Primary FAB */}
      <button 
        onClick={handleAdd}
        className="w-14 h-14 bg-violet text-white rounded-full shadow-lg hover:shadow-xl hover:scale-110 active:scale-95 transition-all duration-200 flex items-center justify-center relative overflow-hidden group"
      >
        <svg className="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
        <span className="absolute inset-0 bg-white/20 rounded-full scale-0 group-hover:scale-100 transition-transform duration-300"></span>
      </button>

      {/* Extended FAB */}
      <button 
        onClick={handleCreate}
        className="px-6 h-14 bg-violet text-white rounded-full shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 transition-all duration-200 flex items-center gap-3 relative overflow-hidden group"
      >
        <svg className="w-5 h-5 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
        </svg>
        <span className="font-medium z-10">Create</span>
        <span className="absolute inset-0 bg-white/20 rounded-full scale-0 group-hover:scale-100 transition-transform duration-300"></span>
      </button>

      {/* Secondary FAB */}
      <button 
        onClick={handleFavorite}
        className="w-12 h-12 bg-white text-gray-700 rounded-full shadow-lg hover:shadow-xl hover:scale-110 active:scale-95 transition-all duration-200 flex items-center justify-center border border-gray-200"
      >
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </svg>
      </button>

      {/* Mini FAB */}
      <button 
        onClick={handleCheck}
        className="w-10 h-10 bg-emerald-500 text-white rounded-full shadow-lg hover:shadow-xl hover:scale-110 active:scale-95 transition-all duration-200 flex items-center justify-center"
      >
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
        </svg>
      </button>
    </div>
  )
}

export default FloatingActionButtons

7. Shadcn/UI Style Buttons

Clean, systematic buttons inspired by Shadcn/UI with consistent spacing and subtle interactions.

<!-- Primary Shadcn Button -->
<button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-900 text-gray-50 hover:bg-gray-800 h-10 px-4 py-2">
    Button
</button>

<!-- Secondary Shadcn Button -->
<button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900 h-10 px-4 py-2 text-gray-900">
    Secondary
</button>

<!-- Outline Shadcn Button -->
<button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-200 bg-transparent hover:bg-gray-100 hover:text-gray-900 h-10 px-4 py-2 text-gray-900">
    Outline
</button>

<!-- Ghost Shadcn Button -->
<button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-gray-100 hover:text-gray-900 h-10 px-4 py-2 text-gray-900">
    Ghost
</button>
<template>
  <div class="flex flex-wrap gap-4">
    <!-- Primary Shadcn Button -->
    <button 
      @click="handlePrimary"
      class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-900 text-gray-50 hover:bg-gray-800 h-10 px-4 py-2"
    >
      Button
    </button>

    <!-- Secondary Shadcn Button -->
    <button 
      @click="handleSecondary"
      class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900 h-10 px-4 py-2 text-gray-900"
    >
      Secondary
    </button>

    <!-- Outline Shadcn Button -->
    <button 
      @click="handleOutline"
      class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-200 bg-transparent hover:bg-gray-100 hover:text-gray-900 h-10 px-4 py-2 text-gray-900"
    >
      Outline
    </button>

    <!-- Ghost Shadcn Button -->
    <button 
      @click="handleGhost"
      class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-gray-100 hover:text-gray-900 h-10 px-4 py-2 text-gray-900"
    >
      Ghost
    </button>
  </div>
</template>

<script setup>
const handlePrimary = () => {
  console.log('Primary shadcn button clicked')
}

const handleSecondary = () => {
  console.log('Secondary shadcn button clicked')
}

const handleOutline = () => {
  console.log('Outline shadcn button clicked')
}

const handleGhost = () => {
  console.log('Ghost shadcn button clicked')
}
</script>
import React from 'react'

const ShadcnButtons = () => {
  const handlePrimary = () => {
    console.log('Primary shadcn button clicked')
  }

  const handleSecondary = () => {
    console.log('Secondary shadcn button clicked')
  }

  const handleOutline = () => {
    console.log('Outline shadcn button clicked')
  }

  const handleGhost = () => {
    console.log('Ghost shadcn button clicked')
  }

  return (
    <div className="flex flex-wrap gap-4">
      {/* Primary Shadcn Button */}
      <button 
        onClick={handlePrimary}
        className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-900 text-gray-50 hover:bg-gray-800 h-10 px-4 py-2"
      >
        Button
      </button>

      {/* Secondary Shadcn Button */}
      <button 
        onClick={handleSecondary}
        className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900 h-10 px-4 py-2 text-gray-900"
      >
        Secondary
      </button>

      {/* Outline Shadcn Button */}
      <button 
        onClick={handleOutline}
        className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-200 bg-transparent hover:bg-gray-100 hover:text-gray-900 h-10 px-4 py-2 text-gray-900"
      >
        Outline
      </button>

      {/* Ghost Shadcn Button */}
      <button 
        onClick={handleGhost}
        className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-gray-100 hover:text-gray-900 h-10 px-4 py-2 text-gray-900"
      >
        Ghost
      </button>
    </div>
  )
}

export default ShadcnButtons

8. Material Design Buttons

Google Material Design inspired buttons with elevation, ripple effects and proper typography.

<!-- Contained Material Button -->
<button class="px-6 py-3 bg-blue-600 text-white font-medium text-sm uppercase tracking-wider rounded shadow-md hover:shadow-lg hover:bg-blue-700 focus:shadow-lg focus:outline-none active:shadow-md transition duration-150 ease-in-out">
    Contained
</button>

<!-- Outlined Material Button -->
<button class="px-6 py-3 border-2 border-blue-600 text-blue-600 font-medium text-sm uppercase tracking-wider rounded hover:bg-blue-50 focus:outline-none transition duration-150 ease-in-out">
    Outlined
</button>

<!-- Text Material Button -->
<button class="px-6 py-3 text-blue-600 font-medium text-sm uppercase tracking-wider rounded hover:bg-blue-50 focus:outline-none transition duration-150 ease-in-out">
    Text
</button>

<!-- Icon Material Button -->
<button class="w-12 h-12 bg-blue-600 text-white rounded-full shadow-md hover:shadow-lg hover:bg-blue-700 focus:shadow-lg focus:outline-none active:shadow-md transition duration-150 ease-in-out flex items-center justify-center">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
    </svg>
</button>
<template>
  <div class="flex flex-wrap gap-4">
    <!-- Contained Material Button -->
    <button 
      @click="handleContained"
      class="px-6 py-3 bg-blue-600 text-white font-medium text-sm uppercase tracking-wider rounded shadow-md hover:shadow-lg hover:bg-blue-700 focus:shadow-lg focus:outline-none active:shadow-md transition duration-150 ease-in-out"
    >
      Contained
    </button>

    <!-- Outlined Material Button -->
    <button 
      @click="handleOutlined"
      class="px-6 py-3 border-2 border-blue-600 text-blue-600 font-medium text-sm uppercase tracking-wider rounded hover:bg-blue-50 focus:outline-none transition duration-150 ease-in-out"
    >
      Outlined
    </button>

    <!-- Text Material Button -->
    <button 
      @click="handleText"
      class="px-6 py-3 text-blue-600 font-medium text-sm uppercase tracking-wider rounded hover:bg-blue-50 focus:outline-none transition duration-150 ease-in-out"
    >
      Text
    </button>

    <!-- Icon Material Button -->
    <button 
      @click="handleIcon"
      class="w-12 h-12 bg-blue-600 text-white rounded-full shadow-md hover:shadow-lg hover:bg-blue-700 focus:shadow-lg focus:outline-none active:shadow-md transition duration-150 ease-in-out flex items-center justify-center"
    >
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
      </svg>
    </button>
  </div>
</template>

<script setup>
const handleContained = () => {
  console.log('Contained material button clicked')
}

const handleOutlined = () => {
  console.log('Outlined material button clicked')
}

const handleText = () => {
  console.log('Text material button clicked')
}

const handleIcon = () => {
  console.log('Icon material button clicked')
}
</script>
import React from 'react'

const MaterialButtons = () => {
  const handleContained = () => {
    console.log('Contained material button clicked')
  }

  const handleOutlined = () => {
    console.log('Outlined material button clicked')
  }

  const handleText = () => {
    console.log('Text material button clicked')
  }

  const handleIcon = () => {
    console.log('Icon material button clicked')
  }

  return (
    <div className="flex flex-wrap gap-4">
      {/* Contained Material Button */}
      <button 
        onClick={handleContained}
        className="px-6 py-3 bg-blue-600 text-white font-medium text-sm uppercase tracking-wider rounded shadow-md hover:shadow-lg hover:bg-blue-700 focus:shadow-lg focus:outline-none active:shadow-md transition duration-150 ease-in-out"
      >
        Contained
      </button>

      {/* Outlined Material Button */}
      <button 
        onClick={handleOutlined}
        className="px-6 py-3 border-2 border-blue-600 text-blue-600 font-medium text-sm uppercase tracking-wider rounded hover:bg-blue-50 focus:outline-none transition duration-150 ease-in-out"
      >
        Outlined
      </button>

      {/* Text Material Button */}
      <button 
        onClick={handleText}
        className="px-6 py-3 text-blue-600 font-medium text-sm uppercase tracking-wider rounded hover:bg-blue-50 focus:outline-none transition duration-150 ease-in-out"
      >
        Text
      </button>

      {/* Icon Material Button */}
      <button 
        onClick={handleIcon}
        className="w-12 h-12 bg-blue-600 text-white rounded-full shadow-md hover:shadow-lg hover:bg-blue-700 focus:shadow-lg focus:outline-none active:shadow-md transition duration-150 ease-in-out flex items-center justify-center"
      >
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
      </button>
    </div>
  )
}

export default MaterialButtons

9. Loading State Buttons

Interactive buttons with loading states, spinners, and disabled modes for better UX.

<!-- Loading Button with Alpine.js -->
<button 
    x-data="{ loading: false }" 
    @click="loading = !loading" 
    :disabled="loading" 
    class="px-6 py-3 bg-violet text-white font-medium rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2"
>
    <svg x-show="loading" class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <span x-text="loading ? 'Loading...' : 'Load Data'"></span>
</button>

<!-- Success Button -->
<button class="px-6 py-3 bg-green-600 text-white font-medium rounded-lg transition-all duration-200 flex items-center gap-2">
    <svg class="w-4 h-4" 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>
    Success
</button>

<!-- Disabled Button -->
<button disabled class="px-6 py-3 bg-gray-300 text-gray-500 font-medium rounded-lg cursor-not-allowed">
    Disabled
</button>

<!-- Progress Button -->
<button class="relative px-6 py-3 bg-blue-600 text-white font-medium rounded-lg overflow-hidden">
    <div class="absolute inset-0 bg-blue-700 w-3/4 transition-all duration-1000"></div>
    <span class="relative z-10">75% Complete</span>
</button>
<template>
  <div class="flex flex-wrap gap-4">
    <!-- Loading Button -->
    <button 
      @click="toggleLoading"
      :disabled="loading"
      class="px-6 py-3 bg-violet text-white font-medium rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2"
    >
      <svg v-show="loading" class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
      
    </button>

    <!-- Success Button -->
    <button class="px-6 py-3 bg-green-600 text-white font-medium rounded-lg transition-all duration-200 flex items-center gap-2">
      <svg class="w-4 h-4" 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>
      Success
    </button>

    <!-- Disabled Button -->
    <button disabled class="px-6 py-3 bg-gray-300 text-gray-500 font-medium rounded-lg cursor-not-allowed">
      Disabled
    </button>

    <!-- Progress Button -->
    <button class="relative px-6 py-3 bg-blue-600 text-white font-medium rounded-lg overflow-hidden">
      <div class="absolute inset-0 bg-blue-700 transition-all duration-1000" :style="{ width: progress + '%' }"></div>
      
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)
const progress = ref(75)

const toggleLoading = () => {
  loading.value = !loading.value
}
</script>
import React, { useState } from 'react'

const LoadingButtons = () => {
  const [loading, setLoading] = useState(false)
  const [progress, setProgress] = useState(75)

  const toggleLoading = () => {
    setLoading(!loading)
  }

  return (
    <div className="flex flex-wrap gap-4">
      {/* Loading Button */}
      <button 
        onClick={toggleLoading}
        disabled={loading}
        className="px-6 py-3 bg-violet text-white font-medium rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2"
      >
        {loading && (
          <svg className="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
        )}
        {loading ? 'Loading...' : 'Load Data'}
      </button>

      {/* Success Button */}
      <button className="px-6 py-3 bg-green-600 text-white font-medium rounded-lg transition-all duration-200 flex items-center gap-2">
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
        </svg>
        Success
      </button>

      {/* Disabled Button */}
      <button disabled className="px-6 py-3 bg-gray-300 text-gray-500 font-medium rounded-lg cursor-not-allowed">
        Disabled
      </button>

      {/* Progress Button */}
      <button className="relative px-6 py-3 bg-blue-600 text-white font-medium rounded-lg overflow-hidden">
        <div 
          className="absolute inset-0 bg-blue-700 transition-all duration-1000" 
          
        ></div>
        <span className="relative z-10">{progress}% Complete</span>
      </button>
    </div>
  )
}

export default LoadingButtons

10. Animated Hover Buttons

Eye-catching buttons with creative hover animations, transforms, and interactive effects.

<!-- Slide Fill Button -->
<button class="relative px-6 py-3 bg-white text-violet font-medium border-2 border-violet rounded-lg overflow-hidden group transition-all duration-300">
    <span class="absolute inset-0 bg-violet transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300 ease-out"></span>
    <span class="relative z-10 group-hover:text-white transition-colors duration-300">Slide Fill</span>
</button>

<!-- Bounce Button -->
<button class="px-6 py-3 bg-orange-500 text-white font-medium rounded-lg hover:scale-110 hover:rotate-3 transform transition-all duration-200 ease-out active:scale-95">
    Bounce
</button>

<!-- Glow Button -->
<button class="px-6 py-3 bg-purple-600 text-white font-medium rounded-lg hover:shadow-[0_0_20px_rgba(147,51,234,0.5)] hover:bg-purple-500 transition-all duration-300">
    Glow Effect
</button>

<!-- Arrow Slide Button -->
<button class="group px-6 py-3 bg-emerald-600 text-white font-medium rounded-lg hover:pr-8 transition-all duration-300 flex items-center gap-2">
    <span>Arrow Slide</span>
    <svg class="w-4 h-4 transform group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
    </svg>
</button>
<template>
  <div class="flex flex-wrap gap-4">
    <!-- Slide Fill Button -->
    <button 
      @click="handleSlideFill"
      class="relative px-6 py-3 bg-white text-violet font-medium border-2 border-violet rounded-lg overflow-hidden group transition-all duration-300"
    >
      <span class="absolute inset-0 bg-violet transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300 ease-out"></span>
      <span class="relative z-10 group-hover:text-white transition-colors duration-300">Slide Fill</span>
    </button>

    <!-- Bounce Button -->
    <button 
      @click="handleBounce"
      class="px-6 py-3 bg-orange-500 text-white font-medium rounded-lg hover:scale-110 hover:rotate-3 transform transition-all duration-200 ease-out active:scale-95"
    >
      Bounce
    </button>

    <!-- Glow Button -->
    <button 
      @click="handleGlow"
      class="px-6 py-3 bg-purple-600 text-white font-medium rounded-lg hover:shadow-[0_0_20px_rgba(147,51,234,0.5)] hover:bg-purple-500 transition-all duration-300"
    >
      Glow Effect
    </button>

    <!-- Arrow Slide Button -->
    <button 
      @click="handleArrowSlide"
      class="group px-6 py-3 bg-emerald-600 text-white font-medium rounded-lg hover:pr-8 transition-all duration-300 flex items-center gap-2"
    >
      <span>Arrow Slide</span>
      <svg class="w-4 h-4 transform group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
      </svg>
    </button>
  </div>
</template>

<script setup>
const handleSlideFill = () => {
  console.log('Slide fill button clicked')
}

const handleBounce = () => {
  console.log('Bounce button clicked')
}

const handleGlow = () => {
  console.log('Glow button clicked')
}

const handleArrowSlide = () => {
  console.log('Arrow slide button clicked')
}
</script>
import React from 'react'

const AnimatedButtons = () => {
  const handleSlideFill = () => {
    console.log('Slide fill button clicked')
  }

  const handleBounce = () => {
    console.log('Bounce button clicked')
  }

  const handleGlow = () => {
    console.log('Glow button clicked')
  }

  const handleArrowSlide = () => {
    console.log('Arrow slide button clicked')
  }

  return (
    <div className="flex flex-wrap gap-4">
      {/* Slide Fill Button */}
      <button 
        onClick={handleSlideFill}
        className="relative px-6 py-3 bg-white text-violet font-medium border-2 border-violet rounded-lg overflow-hidden group transition-all duration-300"
      >
        <span className="absolute inset-0 bg-violet transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300 ease-out"></span>
        <span className="relative z-10 group-hover:text-white transition-colors duration-300">Slide Fill</span>
      </button>

      {/* Bounce Button */}
      <button 
        onClick={handleBounce}
        className="px-6 py-3 bg-orange-500 text-white font-medium rounded-lg hover:scale-110 hover:rotate-3 transform transition-all duration-200 ease-out active:scale-95"
      >
        Bounce
      </button>

      {/* Glow Button */}
      <button 
        onClick={handleGlow}
        className="px-6 py-3 bg-purple-600 text-white font-medium rounded-lg hover:shadow-[0_0_20px_rgba(147,51,234,0.5)] hover:bg-purple-500 transition-all duration-300"
      >
        Glow Effect
      </button>

      {/* Arrow Slide Button */}
      <button 
        onClick={handleArrowSlide}
        className="group px-6 py-3 bg-emerald-600 text-white font-medium rounded-lg hover:pr-8 transition-all duration-300 flex items-center gap-2"
      >
        <span>Arrow Slide</span>
        <svg className="w-4 h-4 transform group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  )
}

export default AnimatedButtons

🚀 How to Use These Components

Requirements

  • TailwindCSS v4.0+ installed (Install Guide)
  • AlpineJS for interactivity (HTML version)
  • React/Vue for framework versions

Pro Tip: These button components work great for CTAs, forms, navigation, and any interactive element. Customize colors, sizes, and animations to match your brand identity.

We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.

Learn More