Search Components

Buttons

Interactive elements that trigger actions

Buttons Component

A set of interactive buttons for a CRM/Business Tools application, featuring microinteractions, jewel tone colors, and full responsiveness with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-2xl rounded-xl p-6 sm:p-8 space-y-8 border border-purple-200 dark:border-purple-900">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center text-purple-800 dark:text-purple-400 mb-8">
      CRM Action Buttons
    </h2>

    <!-- Primary Action Buttons -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
                     bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800
                     text-white text-lg font-semibold shadow-lg
                     transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-102
                     dark:bg-emerald-700 dark:hover:bg-emerald-800 dark:active:bg-emerald-900">
        <span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
        <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
        <span>New Contact</span>
      </button>

      <button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
                     bg-sapphire-600 hover:bg-sapphire-700 active:bg-sapphire-800
                     text-white text-lg font-semibold shadow-lg
                     transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-102
                     dark:bg-sapphire-700 dark:hover:bg-sapphire-800 dark:active:bg-sapphire-900">
        <span class="absolute inset-0 bg-sapphire-500 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
        <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
        <span>View Pipeline</span>
      </button>

      <button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
                     bg-ruby-600 hover:bg-ruby-700 active:bg-ruby-800
                     text-white text-lg font-semibold shadow-lg
                     transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-102
                     dark:bg-ruby-700 dark:hover:bg-ruby-800 dark:active:bg-ruby-900">
        <span class="absolute inset-0 bg-ruby-500 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
        <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span>Schedule Demo</span>
      </button>
    </div>

    <!-- Secondary Action Buttons -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 pt-4">
      <button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
                     bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700
                     text-white text-lg font-semibold shadow-md
                     transition-all duration-300 ease-out transform hover:-translate-y-1
                     dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:active:bg-indigo-800">
        <span class="absolute inset-0 bg-indigo-400 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
        <span>Send Email</span>
      </button>

      <button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
                     bg-purple-500 hover:bg-purple-600 active:bg-purple-700
                     text-white text-lg font-semibold shadow-md
                     transition-all duration-300 ease-out transform hover:-translate-y-1
                     dark:bg-purple-600 dark:hover:bg-purple-700 dark:active:bg-purple-800">
        <span class="absolute inset-0 bg-purple-400 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.59 1.34L15.38 5.76a1 1 0 011.02-.303L21 4V3a1 1 0 00-1-1H4a1 1 0 00-1 1v2zm0 14a2 2 0 002 2h14a2 2 0 002-2v-3l-2.03-2.03a1 1 0 00-.98-.21L15 14l-2.5-1.5-2.59 1.34L9 17l-1.34 2.68L5 20a1 1 0 01-1-1v-2l-1 .5V19z"></path></svg>
        <span>Log Activity</span>
      </button>

      <button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
                     bg-teal-500 hover:bg-teal-600 active:bg-teal-700
                     text-white text-lg font-semibold shadow-md
                     transition-all duration-300 ease-out transform hover:-translate-y-1
                     dark:bg-teal-600 dark:hover:bg-teal-700 dark:active:bg-teal-800">
        <span class="absolute inset-0 bg-teal-400 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
        <span>Add Note</span>
      </button>
    </div>

    <!-- Utility Buttons with subtle hover effects -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 pt-6">
      <button class="relative group flex items-center justify-center px-4 py-2 rounded-lg overflow-hidden
                     bg-gray-100 hover:bg-gray-200 active:bg-gray-300
                     text-gray-700 text-base font-medium shadow-sm
                     transition-all duration-200 ease-in-out transform hover:scale-105
                     dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-500 dark:text-gray-200">
        <span class="absolute inset-0 bg-gray-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0014.586 3H7a2 2 0 00-2 2v11m0 0l-1 1h4m-4-4v4

Skeuomorphic_Social_Buttons

A complex set of skeuomorphic buttons with a vibrant color scheme, designed for social media interfaces. Includes responsive layout and dark mode support, mimicking real-world buttons.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="flex flex-wrap gap-6 p-6 sm:p-8 md:p-10 bg-white dark:bg-gray-700 rounded-3xl shadow-xl border border-gray-200 dark:border-gray-600">

    <!-- Skeuomorphic Button 1: Like -->
    <button class="relative flex items-center justify-center p-4 min-w-[120px] sm:min-w-[150px] md:min-w-[180px] h-16 rounded-full 
                   bg-gradient-to-br from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-700 
                   shadow-lg dark:shadow-xl 
                   border-t border-r border-purple-300 dark:border-purple-600 
                   border-b border-l border-pink-700 dark:border-pink-900 
                   hover:scale-105 active:scale-95 transition-all duration-300 ease-in-out 
                   focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
      <div class="absolute inset-1 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 dark:from-purple-600 dark:to-pink-600 
                  shadow-inner shadow-gray-400/50 dark:shadow-black/50 
                  flex items-center justify-center overflow-hidden">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
        </svg>
        <span class="absolute text-xs sm:text-sm font-bold text-white text-shadow-sm bottom-1 sm:bottom-2">Like</span>
      </div>
    </button>

    <!-- Skeuomorphic Button 2: Share -->
    <button class="relative flex items-center justify-center p-4 min-w-[120px] sm:min-w-[150px] md:min-w-[180px] h-16 rounded-full 
                   bg-gradient-to-br from-blue-500 to-cyan-500 dark:from-blue-700 dark:to-cyan-700 
                   shadow-lg dark:shadow-xl 
                   border-t border-r border-blue-300 dark:border-blue-600 
                   border-b border-l border-cyan-700 dark:border-cyan-900 
                   hover:scale-105 active:scale-95 transition-all duration-300 ease-in-out 
                   focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600">
      <div class="absolute inset-1 rounded-full bg-gradient-to-br from-blue-400 to-cyan-400 dark:from-blue-600 dark:to-cyan-600 
                  shadow-inner shadow-gray-400/50 dark:shadow-black/50 
                  flex items-center justify-center overflow-hidden">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md" fill="currentColor" viewBox="0 0 24 24">
          <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.2.09-.4.09-.6s-.04-.4-.09-.6l7.14-4.11c.52.48 1.2.78 1.96.78 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .2.04.4.09.6L8.04 9.81c-.52-.48-1.2-.78-1.96-.78-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.14 4.11c-.05.2-.09.4-.09.6 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/>
        </svg>
        <span class="absolute text-xs sm:text-sm font-bold text-white text-shadow-sm bottom-1 sm:bottom-2">Share</span>
      </div>
    </button>

    <!-- Skeuomorphic Button 3: Comment -->
    <button class="relative flex items-center justify-center p-4 min-w-[120px] sm:min-w-[150px] md:min-w-[180px] h-16 rounded-full 
                   bg-gradient-to-br from-green-500 to-yellow-500 dark:from-green-700 dark:to-yellow-700 
                   shadow-lg dark:shadow-xl 
                   border-t border-r border-green-300 dark:border-green-600 
                   border-b border-l border-yellow-700 dark:border-yellow-900 
                   hover:scale-105 active:scale-95 transition-all duration-300 ease-in-out 
                   focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-600">
      <div class="absolute inset-1 rounded-full bg-gradient-to-br from-green-400 to-yellow-400 dark:from-green-600 dark:to-yellow-600 
                  shadow-inner shadow-gray-400/50 dark:shadow-black/50 
                  flex items-center justify-center overflow-hidden">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md" fill="currentColor" viewBox="0 0 24 24">
          <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6V6h12v8z"/>
        </svg>
        <span class="absolute text-xs sm:text-sm font-bold text-white text-shadow-sm bottom-1 sm:bottom-2">Comment</span>
      </div>
    </button>

    <!-- Skeuomorphic Button 4: Send Message (Icon Only on small screens) -->
    <button class="relative flex items-center justify-center p-4 min-w-[120px] sm:min-w-[150px] md:min-w-[180px] h-16 rounded-full 
                   bg-gradient-to-br from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 
                   shadow-lg dark:shadow-xl 
                   border-t border-r border-red-300 dark:border-red-600 
                   border-b border-l border-orange-700 dark:border-orange-900 
                   hover:scale-105 active:scale-95 transition-all duration-300 ease-in-out 
                   focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600">
      <div class="absolute inset-1 rounded-full bg-gradient-to-br from-red-400 to-orange-400 dark:from-red-600 dark:to-orange-600 
                  shadow-inner shadow-gray-400/50 dark:shadow-black/50 
                  flex items-center justify-center overflow-hidden">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md" fill="currentColor" viewBox="0 0 24 24">
          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
        </svg>
        <span class="hidden sm:inline-block absolute text-xs sm:text-sm font-bold text-white text-shadow-sm bottom-1 sm:bottom-2">Message</span>
      </div>
    </button>

  </div>
</div>

Buttons Component

A collection of minimalist and flat design buttons for various actions, using a complementary color scheme. Fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="container mx-auto px-4 py-8 bg-white dark:bg-gray-900 shadow-lg rounded-lg max-w-4xl">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 text-gray-900 dark:text-white">Action Buttons</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
      <!-- Primary Button (Text) -->
      <button class="w-full py-3 px-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-800">
        Primary Action
      </button>

      <!-- Secondary Button (Text) -->
      <button class="w-full py-3 px-6 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-lg shadow-md transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
        Secondary Action
      </button>

      <!-- Outline Button -->
      <button class="w-full py-3 px-6 border border-gray-400 hover:border-blue-600 text-gray-700 hover:text-blue-600 font-semibold rounded-lg transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-gray-200
                     dark:border-gray-600 dark:text-gray-300 dark:hover:border-blue-500 dark:hover:text-blue-500 dark:focus:ring-gray-700">
        Outline Button
      </button>

      <!-- Ghost Button -->
      <button class="w-full py-3 px-6 text-blue-600 hover:text-blue-800 font-semibold rounded-lg transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-blue-100 dark:text-blue-500 dark:hover:text-blue-400 dark:focus:ring-blue-900">
        Ghost Button
      </button>

      <!-- Destructive Button -->
      <button class="w-full py-3 px-6 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg shadow-md transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-red-300 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-800">
        Delete Account
      </button>

      <!-- Disabled Button -->
      <button disabled class="w-full py-3 px-6 bg-gray-300 text-gray-500 font-semibold rounded-lg cursor-not-allowed
                   dark:bg-gray-700 dark:text-gray-500">
        Disabled Button
      </button>

      <!-- Button with Icon (Left) -->
      <button class="w-full py-3 px-6 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg shadow-md flex items-center justify-center space-x-2 transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-purple-300 dark:bg-purple-700 dark:hover:bg-purple-800 dark:focus:ring-purple-800">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
        </svg>
        <span>Add Item</span>
      </button>

      <!-- Button with Icon (Right) -->
      <button class="w-full py-3 px-6 bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-semibold rounded-lg shadow-md flex items-center justify-center space-x-2 transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:text-gray-900 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800">
        <span>Next Step</span>
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
        </svg>
      </button>

      <!-- Segmented Buttons / Toggle Group -->
      <div class="col-span-1 md:col-span-2 lg:col-span-1 flex justify-center">
        <div class="inline-flex rounded-lg shadow-sm overflow-hidden border border-gray-300 dark:border-gray-700">
          <button class="py-3 px-6 bg-blue-600 text-white font-semibold flex-1 rounded-l-lg
                         dark:bg-blue-700">
            Month
          </button>
          <button class="py-3 px-6 bg-white hover:bg-gray-100 text-gray-700 font-semibold flex-1 border-x border-gray-300
                         dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-300 dark:border-gray-700">
            Week
          </button>
          <button class="py-3 px-6 bg-white hover:bg-gray-100 text-gray-700 font-semibold flex-1 rounded-r-lg
                         dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-300">
            Day
          </button>
        </div>
      </div>

      <!-- Icon Button (Round) -->
      <button aria-label="Settings" class="w-12 h-12 bg-gray-300 hover:bg-gray-400 text-gray-700 font-semibold rounded-full shadow-md flex items-center justify-center transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-300 dark:focus:ring-gray-600">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
      </button>

      <!-- Floating Action Button (FAB) -->
      <button aria-label="Add New" class="fixed bottom-8 right-8 w-14 h-14 bg-pink-600 hover:bg-pink-700 text-white rounded-full shadow-lg flex items-center justify-center transform hover:scale-105 transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-pink-300 dark:bg-pink-700 dark:hover:bg-pink-800 dark:focus:ring-pink-800">
        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Buttons Component

A set of interactive buttons designed for a portfolio, featuring microinteractions, a complementary color scheme, and full responsiveness with dark mode support.

Open Preview

                <div class="flex min-h-screen items-center justify-center bg-lime-50 py-12 dark:bg-slate-900 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full space-y-8">
    <div class="text-center">
      <h2 class="text-3xl font-extrabold text-slate-800 dark:text-slate-100 sm:text-4xl">
        Showcase Your Work
      </h2>
      <p class="mt-2 text-lg text-lime-600 dark:text-lime-400">
        Click to explore interactive examples.
      </p>
    </div>

    <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-2">

      <!-- Interactive Button 1: Project Details -->
      <button class="group relative flex items-center justify-center overflow-hidden rounded-lg bg-lime-500 py-3 px-6 font-semibold text-white transition-all duration-300 ease-out hover:scale-105 active:scale-95 dark:bg-lime-600 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="absolute inset-0 z-0 bg-gradient-to-r from-lime-600 to-green-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-lime-700 dark:to-green-600"></span>
        <span class="relative z-10 flex items-center">
          <svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
          </svg>
          View Project
        </span>
      </button>

      <!-- Interactive Button 2: Live Demo -->
      <button class="group relative flex items-center justify-center overflow-hidden rounded-lg bg-red-500 py-3 px-6 font-semibold text-white transition-all duration-300 ease-out hover:scale-105 active:scale-95 dark:bg-red-600 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="absolute top-0 left-0 h-full w-0 bg-red-600 transition-all duration-300 ease-out group-hover:w-full dark:bg-red-700"></span>
        <span class="absolute right-0 bottom-0 h-full w-0 bg-red-600 transition-all duration-300 ease-out group-hover:w-full dark:bg-red-700"></span>
        <span class="relative z-10 flex items-center">
          <svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4-4m0 0l-4-4m4 4H9m11 7v3a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h3"></path>
          </svg>
          Live Demo
        </span>
      </button>

      <!-- Interactive Button 3: Download Assets -->
      <button class="group relative flex items-center justify-center overflow-hidden rounded-lg bg-orange-500 py-3 px-6 font-semibold text-white transition-all duration-300 ease-out hover:scale-105 active:scale-95 dark:bg-orange-600 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="absolute inset-0 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left bg-orange-600 dark:bg-orange-700"></span>
        <span class="relative z-10 flex items-center">
          <svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
          </svg>
          Download Assets
        </span>
      </button>

      <!-- Interactive Button 4: GitHub Repo -->
      <button class="group relative flex items-center justify-center overflow-hidden rounded-lg bg-violet-500 py-3 px-6 font-semibold text-white transition-all duration-300 ease-out hover:scale-105 active:scale-95 dark:bg-violet-600 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="absolute inset-0 bg-violet-600 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:bg-violet-700"></span>
        <span class="relative z-10 flex items-center">
          <svg class="mr-2 h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.417 2.868 8.129 6.837 9.488.499.091.682-.217.682-.483 0-.237-.008-.865-.013-1.698-2.782.603-3.37-1.341-3.37-1.341-.454-1.151-1.107-1.458-1.107-1.458-.907-.61.069-.598.069-.598 1.002.071 1.531 1.028 1.531 1.028.891 1.529 2.341 1.089 2.91.831.091-.645.35-1.088.636-1.338-2.22-.253-4.555-1.111-4.555-4.962 0-1.096.391-1.996 1.029-2.701-.103-.255-.447-1.272.098-2.651 0 0 .84-.271 2.75 1.029A9.563 9.563 0 0110 4.908c.85.004 1.701.114 2.502.327 1.909-1.298 2.747-1.029 2.747-1.029.546 1.379.202 2.396.099 2.651.64.705 1.028 1.605 1.028 2.701 0 3.864-2.339 4.707-4.568 4.953.359.309.678.918.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.577.688.481C17.135 18.118 20 14.406 20 10.017A9.994 9.994 0 0010 0z" clip-rule="evenodd"></path>
          </svg>
          GitHub Repo
        </span>
      </button>

    </div>

    <div class="text-center mt-8">
      <p class="text-slate-600 dark:text-slate-400 text-sm">
        Explore more projects by <a href="#" class="font-medium text-lime-700 hover:underline dark:text-lime-300">[Your Name]</a>
      </p>
    </div>
  </div>
</div>

Neumorphism Buttons Component

A complex Neumorphism-styled button component with vibrant colors, responsive design, and dark mode support, suitable for business/corporate websites.

Open Preview

                <div class="flex flex-wrap items-center justify-center min-h-screen p-10 bg-gray-200 dark:bg-gray-800">
  <!-- Primary Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-purple-700 dark:text-purple-300 bg-gradient-to-br from-purple-300 to-purple-500 dark:from-purple-800 dark:to-purple-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Primary Action
  </button>

  <!-- Secondary Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-pink-700 dark:text-pink-300 bg-gradient-to-br from-pink-300 to-pink-500 dark:from-pink-800 dark:to-pink-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Secondary Action
  </button>

  <!-- Success Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-green-700 dark:text-green-300 bg-gradient-to-br from-green-300 to-green-500 dark:from-green-800 dark:to-green-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Action Success
  </button>

  <!-- Warning Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-yellow-700 dark:text-yellow-300 bg-gradient-to-br from-yellow-300 to-yellow-500 dark:from-yellow-800 dark:to-yellow-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Action Warning
  </button>

  <!-- Danger Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-red-700 dark:text-red-300 bg-gradient-to-br from-red-300 to-red-500 dark:from-red-800 dark:to-red-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Action Danger
  </button>

  <!-- Icon Button -->
  <button class="m-4 p-5 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-2xl text-blue-700 dark:text-blue-300 bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-800 dark:to-blue-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
    </svg>
  </button>

  <!-- Disabled Button Example (add `pointer-events-none opacity-50` for real disabling) -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-gray-500 dark:text-gray-400 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 cursor-not-allowed">
    Disabled
  </button>

</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #4d4d4d, -8px -8px 16px #333333;
  }

  .shadow-neumorphic-pressed-light {
    box-shadow: inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 6px 6px 12px #4d4d4d, inset -6px -6px 12px #333333;
  }
</style>

Buttons Component

A retro-vintage themed button component with triadic color scheme, simple complexity, and responsive design with dark mode support, suitable for a blog or content website.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- Retro Button 1 -->
  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-red-700 dark:hover:bg-red-900">
    Click Me (Red)
  </button>

  <!-- Retro Button 2 -->
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-blue-700 dark:hover:bg-blue-900">
    Click Me (Blue)
  </button>

  <!-- Retro Button 3 -->
  <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-yellow-700 dark:hover:bg-yellow-900">
    Click Me (Yellow)
  </button>

  <!-- Responsive Example: Buttons stack on small screens and are side-by-side on larger screens -->
  <div class="flex flex-col sm:flex-row mt-8">
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded m-2
                   dark:bg-green-700 dark:hover:bg-green-900">
      Responsive Button 1
    </button>
    <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded m-2
                   dark:bg-purple-700 dark:hover:bg-purple-900">
      Responsive Button 2
    </button>
  </div>

  <!-- Dark Mode Toggle Placeholder (for visual representation, no JS) -->
  <div class="mt-8 text-gray-700 dark:text-gray-300">
    Toggle your browser/OS dark mode to see changes.
  </div>

</div>

Buttons Component

A responsive buttons component with dark mode support, suitable for e-commerce, featuring a simple triadic color scheme.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">

  <!-- Product Card Example with Buttons -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-sm mb-8">
    <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/400/300?random=1" alt="Product Image">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Product Title</h3>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Product description goes here. Short and catchy!.</p>
    <div class="flex items-center justify-between mb-4">
      <span class="text-lg font-bold text-gray-900 dark:text-gray-50">$29.99</span>
      <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$39.99</span>
    </div>
    <div class="flex space-x-4">
      <button class="flex-1 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Add to Cart
      </button>
      <button class="flex-1 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Buy Now
      </button>
    </div>
  </div>

  <!-- Standalone Buttons Section -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-sm">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Other Actions</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        View Details
      </button>
      <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        Add to Wishlist
      </button>
      <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        Contact Seller
      </button>
      <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        Report Issue
      </button>
    </div>
  </div>

</div>

Buttons Component

A minimalist button component for dashboards, with support for responsive design and dark theme.

Open Preview

                <div class="flex space-x-4 p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Primary Button -->
  <button class="px-4 py-2 rounded-md
    bg-blue-500 text-white font-semibold
    hover:bg-blue-600
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
    dark:bg-blue-700 dark:hover:bg-blue-600">
    Primary Action
  </button>

  <!-- Secondary Button -->
  <button class="px-4 py-2 rounded-md
    bg-gray-300 text-gray-800 font-semibold
    hover:bg-gray-400
    focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-opacity-75
    dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
    Secondary Action
  </button>

  <!-- Success Button -->
  <button class="px-4 py-2 rounded-md
    bg-green-500 text-white font-semibold
    hover:bg-green-600
    focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75
    dark:bg-green-700 dark:hover:bg-green-600">
    Success
  </button>

  <!-- Danger Button -->
  <button class="px-4 py-2 rounded-md
    bg-red-500 text-white font-semibold
    hover:bg-red-600
    focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75
    dark:bg-red-700 dark:hover:bg-red-600">
    Delete
  </button>

  <!-- Disabled Button -->
  <button class="px-4 py-2 rounded-md
    bg-gray-200 text-gray-500 font-semibold
    cursor-not-allowed
    dark:bg-gray-800 dark:text-gray-600"
    disabled>
    Disabled
  </button>
</div>

Buttons Component

A Buttons component designed with 3D elements and vibrant colors for social media interfaces, supporting dark theme and responsive design.

Open Preview

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Connect with Us!</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=1" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Follow
        </a>
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=2" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Share
        </a>
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=3" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Like
        </a>
    </div>
</div>

A minimalist/flat design Buttons Component with a grayscale color scheme. It is suitable for business/corporate websites and has moderate complexity with some interactive features. It is responsive and supports dark theme using Tailwind CSS.

Open Preview

                <div class="flex flex-wrap justify-center gap-4 p-4">
  <!-- Primary Button -->
  <button class="px-6 py-3 font-semibold text-white bg-gray-800 rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50
                     dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-300">
    Primary Button
  </button>

  <!-- Secondary Button -->
  <button class="px-6 py-3 font-semibold text-gray-800 bg-white border border-gray-300 rounded-md shadow-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
                     dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
    Secondary Button
  </button>

  <!-- Tertiary Button -->
  <button class="px-6 py-3 font-semibold text-gray-600 bg-transparent rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
                     dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
    Tertiary Button
  </button>

  <!-- Disabled Button -->
  <button class="px-6 py-3 font-semibold text-gray-400 bg-gray-200 rounded-md cursor-not-allowed
                     dark:bg-gray-700 dark:text-gray-600" disabled>
    Disabled Button
  </button>

  <!-- Button with Icon -->
  <button class="flex items-center px-6 py-3 font-semibold text-white bg-gray-800 rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50
                     dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-300">
    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
    Button with Icon
  </button>

  <!-- Outline Button with Icon -->
  <button class="flex items-center px-6 py-3 font-semibold text-gray-800 bg-white border border-gray-300 rounded-md shadow-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
                     dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
    Outline Button with Icon
  </button>
</div>

Search Components

Categories

Buttons