Search Components

Buttons

Interactive elements that trigger actions

3D_Healthcare_Buttons_Component

A complex 3D-inspired buttons component for healthcare applications, featuring a black and white monochrome design with a bright accent color, responsive layout, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 sm:p-8 md:p-10 border border-gray-200 dark:border-gray-700 relative overflow-hidden">
    
    <!-- Background Shapes for 3D Effect -->
    <div class="absolute -top-10 -left-10 w-48 h-48 bg-gray-200 dark:bg-gray-700 rounded-full mix-blend-multiply opacity-30 blur-xl"></div>
    <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-teal-300 dark:bg-cyan-600 rounded-full mix-blend-multiply opacity-20 blur-xl"></div>

    <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-8 text-center relative z-10">
      <span class="relative inline-block">
        Medical Actions
        <span class="absolute bottom-0 left-0 w-full h-1 bg-teal-500 dark:bg-cyan-500 rounded-full animate-pulse"></span>
      </span>
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 relative z-10">

      <!-- Button 1: Schedule Appointment -->
      <button class="relative group flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-lg
                     transform transition-all duration-300 hover:scale-105 hover:shadow-xl
                     overflow-hidden perspective-1000
                     border-t border-t-gray-100 dark:border-t-gray-600 border-l border-l-gray-100 dark:border-l-gray-600
                     active:translate-y-0.5 active:shadow-md">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-white dark:from-gray-700 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="absolute inset-0 bg-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 filter blur-sm group-hover:blur-none">
          <div class="absolute top-0 left-0 h-full w-0.5 bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:w-full group-hover:opacity-100 transition-all duration-300 ease-out"></div>
          <div class="absolute top-0 right-0 h-0.5 w-full bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:h-full group-hover:opacity-100 transition-all duration-300 ease-out delay-100"></div>
          <div class="absolute bottom-0 right-0 h-full w-0.5 bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:w-full group-hover:opacity-100 transition-all duration-300 ease-out delay-200"></div>
          <div class="absolute bottom-0 left-0 h-0.5 w-full bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:h-full group-hover:opacity-100 transition-all duration-300 ease-out delay-300"></div>
        </div>

        <div class="relative z-10 text-center">
          <svg class="w-16 h-16 text-teal-600 dark:text-cyan-400 mb-4 transition-transform duration-300 group-hover:rotate-6 group-hover:scale-110" 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="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2zm3-7h.01M12 15h.01M15 15h.01"></path>
          </svg>
          <span class="text-xl font-semibold text-gray-800 dark:text-gray-100 whitespace-nowrap">Schedule Appointment</span>
          <p class="text-sm text-gray-500 dark:text-gray-300 mt-1">Book your next visit</p>
        </div>
      </button>

      <!-- Button 2: View Medical Records -->
      <button class="relative group flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-lg
                     transform transition-all duration-300 hover:scale-105 hover:shadow-xl
                     overflow-hidden perspective-1000
                     border-t border-t-gray-100 dark:border-t-gray-600 border-l border-l-gray-100 dark:border-l-gray-600
                     active:translate-y-0.5 active:shadow-md">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-white dark:from-gray-700 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="absolute inset-0 bg-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 filter blur-sm group-hover:blur-none">
          <div class="absolute top-0 left-0 h-full w-0.5 bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:w-full group-hover:opacity-100 transition-all duration-300 ease-out"></div>
          <div class="absolute top-0 right-0 h-0.5 w-full bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:h-full group-hover:opacity-100 transition-all duration-300 ease-out delay-100"></div>
          <div class="absolute bottom-0 right-0 h-full w-0.5 bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:w-full group-hover:opacity-100 transition-all duration-300 ease-out delay-200"></div>
          <div class="absolute bottom-0 left-0 h-0.5 w-full bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:h-full group-hover:opacity-100 transition-all duration-300 ease-out delay-300"></div>
        </div>
        <div class="relative z-10 text-center">
          <svg class="w-16 h-16 text-teal-600 dark:text-cyan-400 mb-4 transition-transform duration-300 group-hover:-rotate-6 group-hover:scale-110" 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="1.5" 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>
          <span class="text-xl font-semibold text-gray-800 dark:text-gray-100">View Medical Records</span>
          <p class="text-sm text-gray-500 dark:text-gray-300 mt-1">Access your health history</p>
        </div>
      </button>

      <!-- Button 3: Prescription Refills -->
      <button class="relative group flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-lg
                     transform transition-all duration-300 hover:scale-105 hover:shadow-xl
                     overflow-hidden perspective-1000
                     border-t border-t-gray-100 dark:border-t-gray-600 border-l border-l-gray-100 dark:border-l-gray-600
                     active:translate-y-0.5 active:shadow-md">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-white dark:from-gray-700 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="absolute inset-0 bg-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 filter blur-sm group-hover:blur-none">
          <div class="absolute top-0 left-0 h-full w-0.5 bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:w-full group-hover:opacity-100 transition-all duration-300 ease-out"></div>
          <div class="absolute top-0 right-0 h-0.5 w-full bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:h-full group-hover:opacity-100 transition-all duration-300 ease-out delay-100"></div>
          <div class="absolute bottom-0 right-0 h-full w-0.5 bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:w-full group-hover:opacity-100 transition-all duration-300 ease-out delay-200"></div>
          <div class="absolute bottom-0 left-0 h-0.5 w-full bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:h-full group-hover:opacity-100 transition-all duration-300 ease-out delay-300"></div>
        </div>
        <div class="relative z-10 text-center">
          <svg class="w-16 h-16 text-teal-600 dark:text-cyan-400 mb-4 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-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="1.5" d="M8 13v-1m4 1v-1m4 1v-1M3 21h18m-10-3zM7 8h10a1 1 0 011 1v7h-12V9a1 1 0 011-1zM3 8a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V8z"></path>
          </svg>
          <span class="text-xl font-semibold text-gray-800 dark:text-gray-100">Prescription Refills</span>
          <p class="text-sm text-gray-500 dark:text-gray-300 mt-1">Order your medications</p>
        </div>
      </button>

      <!-- Button 4: Telehealth Consultation -->
      <button class="relative group flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-lg
                     transform transition-all duration-300 hover:scale-105 hover:shadow-xl
                     overflow-hidden perspective-1000
                     border-t border-t-gray-100 dark:border-t-gray-600 border-l border-l-gray-100 dark:border-l-gray-600
                     active:translate-y-0.5 active:shadow-md">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-white dark:from-gray-700 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="absolute inset-0 bg-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 filter blur-sm group-hover:blur-none">
          <div class="absolute top-0 left-0 h-full w-0.5 bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:w-full group-hover:opacity-100 transition-all duration-300 ease-out"></div>
          <div class="absolute top-0 right-0 h-0.5 w-full bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:h-full group-hover:opacity-100 transition-all duration-300 ease-out delay-100"></div>
          <div class="absolute bottom-0 right-0 h-full w-0.5 bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:w-full group-hover:opacity-100 transition-all duration-300 ease-out delay-200"></div>
          <div class="absolute bottom-0 left-0 h-0.5 w-full bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:h-full group-hover:opacity-100 transition-all duration-300 ease-out delay-300"></div>
        </div>
        <div class="relative z-10 text-center">
          <svg class="w-16 h-16 text-teal-600 dark:text-cyan-400 mb-4 transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-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="1.5" d="M9.75 17L9.25 17C6.01 17 3.5 15.5 3.5 13.5C3.5 11.5 6.01 10.5 9.25 10.5L9.75 10.5M14.25 17L14.75 17C17.99 17 20.5 15.5 20.5 13.5C20.5 11.5 17.99 10.5 14.75 10.5L14.25 10.5M12 21V3m-9 9h18"></path>
          </svg>
          <span class="text-xl font-semibold text-gray-800 dark:text-gray-100">Telehealth Consultation</span>
          <p class="text-sm text-gray-500 dark:text-gray-300 mt-1">Connect remotely with a doctor</p>
        </div>
      </button>

      <!-- Button 5: Find a Specialist -->
      <button class="relative group flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-lg
                     transform transition-all duration-300 hover:scale-105 hover:shadow-xl
                     overflow-hidden perspective-1000
                     border-t border-t-gray-100 dark:border-t-gray-600 border-l border-l-gray-100 dark:border-l-gray-600
                     active:translate-y-0.5 active:shadow-md">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-white dark:from-gray-700 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="absolute inset-0 bg-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 filter blur-sm group-hover:blur-none">
          <div class="absolute top-0 left-0 h-full w-0.5 bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:w-full group-hover:opacity-100 transition-all duration-300 ease-out"></div>
          <div class="absolute top-0 right-0 h-0.5 w-full bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:h-full group-hover:opacity-100 transition-all duration-300 ease-out delay-100"></div>
          <div class="absolute bottom-0 right-0 h-full w-0.5 bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:w-full group-hover:opacity-100 transition-all duration-300 ease-out delay-200"></div>
          <div class="absolute bottom-0 left-0 h-0.5 w-full bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:h-full group-hover:opacity-100 transition-all duration-300 ease-out delay-300"></div>
        </div>
        <div class="relative z-10 text-center">
          <svg class="w-16 h-16 text-teal-600 dark:text-cyan-400 mb-4 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-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="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
          <span class="text-xl font-semibold text-gray-800 dark:text-gray-100">Find a Specialist</span>
          <p class="text-sm text-gray-500 dark:text-gray-300 mt-1">Locate the right expert</p>
        </div>
      </button>

      <!-- Button 6: Emergency Contact -->
      <button class="relative group flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-lg
                     transform transition-all duration-300 hover:scale-105 hover:shadow-xl
                     overflow-hidden perspective-1000
                     border-t border-t-gray-100 dark:border-t-gray-600 border-l border-l-gray-100 dark:border-l-gray-600
                     active:translate-y-0.5 active:shadow-md">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-white dark:from-gray-700 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="absolute inset-0 bg-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 filter blur-sm group-hover:blur-none">
          <div class="absolute top-0 left-0 h-full w-0.5 bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:w-full group-hover:opacity-100 transition-all duration-300 ease-out"></div>
          <div class="absolute top-0 right-0 h-0.5 w-full bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:h-full group-hover:opacity-100 transition-all duration-300 ease-out delay-100"></div>
          <div class="absolute bottom-0 right-0 h-full w-0.5 bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:w-full group-hover:opacity-100 transition-all duration-300 ease-out delay-200"></div>
          <div class="absolute bottom-0 left-0 h-0.5 w-full bg-teal-500 dark:bg-cyan-500 opacity-0 group-hover:h-full group-hover:opacity-100 transition-all duration-300 ease-out delay-300"></div>
        </div>
        <div class="relative z-10 text-center">
          <svg class="w-16 h-16 text-red-500 dark:text-red-400 mb-4 animate-pulse transition-transform duration-300 group-hover:scale-110" 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="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="text-xl font-bold text-red-600 dark:text-red-400">Emergency Contact</span>
          <p class="text-sm text-gray-500 dark:text-gray-300 mt-1">Immediate medical help</p>
        </div>
      </button>

    </div>

    <div class="mt-12 text-center relative z-10">
      <p class="text-gray-600 dark:text-gray-400 text-lg">
        Need help? Contact <a href="#" class="text-teal-600 dark:text-cyan-500 hover:underline font-medium ml-1">Support</a>
      </p>
    </div>
  </div>
</div>

Playful Entertainment Buttons

A set of playful and fun buttons designed for an entertainment or media platform, featuring muted/desaturated colors and rounded elements. Responsive and includes dark mode support.

Open Preview

                <div class="p-4 sm:p-8 md:p-12 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-700 rounded-3xl shadow-xl p-6 sm:p-8 md:p-10 border border-gray-200 dark:border-gray-600 transition-all duration-300">
    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-center mb-8 sm:mb-10 text-gray-800 dark:text-gray-100 leading-tight">
      Your Next Obsession Starts Here!
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8">
      
      <!-- Button 1: Stream Now -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-purple-300 dark:bg-purple-600 text-white dark:text-purple-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-purple-400 dark:group-hover:bg-purple-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">Stream Now</span>
      </button>

      <!-- Button 2: Discover More -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-teal-300 dark:bg-teal-600 text-white dark:text-teal-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-teal-400 dark:group-hover:bg-teal-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">Discover More</span>
      </button>

      <!-- Button 3: My Watchlist -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-orange-300 dark:bg-orange-600 text-white dark:text-orange-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-orange-400 dark:group-hover:bg-orange-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">My Watchlist</span>
      </button>

      <!-- Button 4: Browse Genres -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-rose-300 dark:bg-rose-600 text-white dark:text-rose-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-rose-400 dark:group-hover:bg-rose-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">Browse Genres</span>
      </button>

      <!-- Button 5: Recently Added -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-sky-300 dark:bg-sky-600 text-white dark:text-sky-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-sky-400 dark:group-hover:bg-sky-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">Recently Added</span>
      </button>

      <!-- Button 6: Settings/Profile -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-gray-300 dark:bg-gray-500 text-gray-800 dark:text-gray-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-400 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-gray-400 dark:group-hover:bg-gray-600 opacity-50 rounded-full transition-all duration-300"></span>
        <img class="h-8 w-8 sm:h-9 sm:w-9 rounded-full mr-2 sm:mr-3 object-cover shadow-inner" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
        <span class="relative z-10 text-lg sm:text-xl">My Account</span>
      </button>

    </div>

    <div class="mt-10 sm:mt-12 text-center text-gray-600 dark:text-gray-300 text-sm sm:text-base">
      <p class="mb-2">Enjoy endless entertainment anywhere, anytime.</p>
      <p>&copy; <span id="current-year"></span> Your Entertainment Platform. All rights reserved.</p>
    </div>
  </div>
</div>

<script>
  document.getElementById('current-year').textContent = new Date().getFullYear();
</script>

Buttons Component

Simple, responsive button component with a paper/print-inspired grayscale design, suitable for educational platforms, supporting light and dark modes.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-[200px] flex items-center justify-center font-sans">
  <div class="max-w-xl w-full mx-auto p-6 sm:p-8 md:p-10 bg-white dark:bg-gray-800 shadow-md rounded-lg border border-gray-200 dark:border-gray-700 leading-relaxed">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-tight leading-tight">
      Lesson Navigation
    </h2>
    <div class="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center">
      <button type="button" class="transition-all duration-300 ease-in-out
        flex-1 px-6 py-3 text-lg sm:text-xl font-semibold
        bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100
        border border-gray-300 dark:border-gray-600 rounded-md
        shadow-sm hover:shadow-md
        hover:bg-gray-50 dark:hover:bg-gray-600
        focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800
        active:bg-gray-100 dark:active:bg-gray-700/80
        whitespace-nowrap text-center
        relative group overflow-hidden">
        <span class="absolute inset-0 border-white dark:border-gray-800 border-2 rounded-md transform scale-105 group-hover:scale-100 transition-transform duration-300 ease-in-out opacity-0 group-hover:opacity-100"></span>
        Previous Lesson
      </button>
      <button type="button" class="transition-all duration-300 ease-in-out
        flex-1 px-6 py-3 text-lg sm:text-xl font-semibold
        bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900
        border border-gray-800 dark:border-gray-100 rounded-md
        shadow-md hover:shadow-lg
        hover:bg-gray-700 dark:hover:bg-gray-200
        focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800
        active:bg-gray-900 dark:active:bg-gray-300
        whitespace-nowrap text-center
        relative group overflow-hidden">
        <span class="absolute inset-0 border-gray-800 dark:border-gray-100 border-2 rounded-md transform scale-105 group-hover:scale-100 transition-transform duration-300 ease-in-out opacity-0 group-hover:opacity-100"></span>
        Next Lesson
      </button>
    </div>
    <div class="mt-6 sm:mt-8 text-center">
      <a href="#" class="inline-flex items-center text-base sm:text-lg font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors duration-200">
        <svg class="w-5 h-5 mr-2 -ml-1" 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 6h16M4 12h16M4 18h16"></path>
        </svg>
        View All Lessons
      </a>
    </div>
  </div>
</div>

3D_Business_Buttons_Component

A responsive set of 3D-styled business buttons with a warm sunset color scheme, suitable for corporate websites. Includes dark mode support and interactive hover effects.

Open Preview

                <div class="p-8 bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="container mx-auto px-4 py-8 max-w-4xl">
    <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-12 bg-clip-text text-transparent bg-gradient-to-r from-orange-600 to-red-800 dark:from-orange-400 dark:to-red-600 drop-shadow-md">
      Elevate Your Business
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Button 1: Learn More -->
      <a href="#" class="group block w-full">
        <div class="relative p-1 rounded-2xl shadow-xl transition-all duration-300 border border-orange-100 dark:border-gray-700
                    hover:scale-[1.02] hover:shadow-2xl active:scale-[0.98]
                    bg-gradient-to-br from-orange-400 to-red-600 dark:from-orange-600 dark:to-red-800
                    transform -translate-y-1 group-hover:-translate-y-2 group-active:-translate-y-0.5">
          <div class="absolute inset-0 bg-transparent rounded-2xl group-hover:bg-black group-hover:bg-opacity-5 transition-all duration-300"></div>
          <div class="relative z-10 px-8 py-10 text-center rounded-xl bg-orange-50 dark:bg-gray-800
                      transform translate-z-10 group-hover:bg-orange-100 dark:group-hover:bg-gray-900
                      transition-all duration-300 overflow-hidden
                      after:content-[''] after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br
                      after:from-orange-200 after:to-red-300 after:dark:from-gray-700 after:dark:to-gray-900
                      after:opacity-0 group-hover:after:opacity-100 group-hover:after:brightness-125 group-active:after:opacity-75
                      after:transition-all after:duration-300 after:mix-blend-overlay">
            <p class="text-5xl mb-4 text-orange-600 dark:text-orange-400 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-300">
              <span class="block transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">&#x1F4A1;</span>
            </p>
            <h3 class="text-2xl font-bold text-red-800 dark:text-red-400 mb-2 group-hover:text-orange-700 dark:group-hover:text-orange-300 transition-colors duration-300">
              Learn More
            </h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              Dive deep into our offerings and discover how we can help your business thrive.
            </p>
            <span class="mt-6 inline-flex px-6 py-3 rounded-full bg-orange-600 text-white font-semibold shadow-md
                         group-hover:bg-red-700 group-active:bg-orange-700 transition-all duration-300
                         transform group-hover:scale-105 group-active:scale-95
                         shadow-[0_4px_15px_rgba(234,88,12,0.4)] group-hover:shadow-[0_6px_20px_rgba(220,38,38,0.5)]">
              Explore Now
            </span>
          </div>
        </div>
      </a>

      <!-- Button 2: Get Started -->
      <a href="#" class="group block w-full">
        <div class="relative p-1 rounded-2xl shadow-xl transition-all duration-300 border border-orange-100 dark:border-gray-700
                    hover:scale-[1.02] hover:shadow-2xl active:scale-[0.98]
                    bg-gradient-to-br from-yellow-400 to-orange-600 dark:from-yellow-600 dark:to-orange-800
                    transform -translate-y-1 group-hover:-translate-y-2 group-active:-translate-y-0.5">
          <div class="absolute inset-0 bg-transparent rounded-2xl group-hover:bg-black group-hover:bg-opacity-5 transition-all duration-300"></div>
          <div class="relative z-10 px-8 py-10 text-center rounded-xl bg-yellow-50 dark:bg-gray-800
                      transform translate-z-10 group-hover:bg-yellow-100 dark:group-hover:bg-gray-900
                      transition-all duration-300 overflow-hidden
                      after:content-[''] after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br
                      after:from-yellow-200 after:to-orange-300 after:dark:from-gray-700 after:dark:to-gray-900
                      after:opacity-0 group-hover:after:opacity-100 group-hover:after:brightness-125 group-active:after:opacity-75
                      after:transition-all after:duration-300 after:mix-blend-overlay">
            <p class="text-5xl mb-4 text-orange-600 dark:text-orange-400 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-300">
              <span class="block transform group-hover:scale-110 group-hover:-rotate-6 transition-transform duration-300">&#x1F680;</span>
            </p>
            <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-400 mb-2 group-hover:text-red-700 dark:group-hover:text-red-300 transition-colors duration-300">
              Get Started
            </h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              Begin your journey with us today. It's quick, easy, and rewarding.
            </p>
            <span class="mt-6 inline-flex px-6 py-3 rounded-full bg-orange-600 text-white font-semibold shadow-md
                         group-hover:bg-red-700 group-active:bg-orange-700 transition-all duration-300
                         transform group-hover:scale-105 group-active:scale-95
                         shadow-[0_4px_15px_rgba(245,158,11,0.4)] group-hover:shadow-[0_6px_20px_rgba(220,38,38,0.5)]">
              Sign Up Now
            </span>
          </div>
        </div>
      </a>

      <!-- Button 3: Contact Us -->
      <a href="#" class="group block w-full">
        <div class="relative p-1 rounded-2xl shadow-xl transition-all duration-300 border border-orange-100 dark:border-gray-700
                    hover:scale-[1.02] hover:shadow-2xl active:scale-[0.98]
                    bg-gradient-to-br from-red-400 to-yellow-600 dark:from-red-600 dark:to-yellow-800
                    transform -translate-y-1 group-hover:-translate-y-2 group-active:-translate-y-0.5">
          <div class="absolute inset-0 bg-transparent rounded-2xl group-hover:bg-black group-hover:bg-opacity-5 transition-all duration-300"></div>
          <div class="relative z-10 px-8 py-10 text-center rounded-xl bg-red-50 dark:bg-gray-800
                      transform translate-z-10 group-hover:bg-red-100 dark:group-hover:bg-gray-900
                      transition-all duration-300 overflow-hidden
                      after:content-[''] after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br
                      after:from-red-200 after:to-yellow-300 after:dark:from-gray-700 after:dark:to-gray-900
                      after:opacity-0 group-hover:after:opacity-100 group-hover:after:brightness-125 group-active:after:opacity-75
                      after:transition-all after:duration-300 after:mix-blend-overlay">
            <p class="text-5xl mb-4 text-red-600 dark:text-red-400 group-hover:text-orange-700 dark:group-hover:text-orange-500 transition-colors duration-300">
              <span class="block transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300">&#x1F4DE;</span>
            </p>
            <h3 class="text-2xl font-bold text-red-800 dark:text-red-400 mb-2 group-hover:text-orange-700 dark:group-hover:text-orange-300 transition-colors duration-300">
              Contact Us
            </h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              Have questions? Reach out to our team. We're here to help you.
            </p>
            <span class="mt-6 inline-flex px-6 py-3 rounded-full bg-orange-600 text-white font-semibold shadow-md
                         group-hover:bg-red-700 group-active:bg-orange-700 transition-all duration-300
                         transform group-hover:scale-105 group-active:scale-95
                         shadow-[0_4px_15px_rgba(239,68,68,0.4)] group-hover:shadow-[0_6px_20px_rgba(220,38,38,0.5)]">
              Get in Touch
            </span>
          </div>
        </div>
      </a>

    </div>
  </div>
</div>

ArtDecoECommerceButtons

A complex set of Art Deco inspired e-commerce buttons with geometric patterns and luxurious Ocean/Blue tones, optimized for responsiveness and dark mode.

Open Preview

                <div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-blue-950 min-h-screen flex items-center justify-center font-serif">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-2xl rounded-lg overflow-hidden border-4 border-blue-400 dark:border-blue-700 transform transition-all duration-500 hover:scale-[1.01]">
    <div class="p-6 sm:p-8 lg:p-12 bg-blue-600 dark:bg-blue-900 text-white flex justify-between items-center relative overflow-hidden">
      <div class="absolute inset-0 pattern-geometric opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-wide drop-shadow-lg z-10">Oceanic Selections</h2>
      <div class="flex items-center space-x-3 z-10">
        <span class="text-lg font-semibold">Your Cart</span>
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white" 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 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.705.42 2.302l.644.644m-.644-.644L11.75 21M7 13H5.4M11.75 21h3.5M11.75 21L9.25 10.25l-2.293 2.293c-.63-.63-.182 1.705.42 2.302l.644.644" />
        </svg>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8 md:p-10">
      <!-- Primary Button -->
      <button class="w-full py-4 px-6 bg-gradient-to-br from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 text-white text-lg font-bold uppercase rounded-lg shadow-xl tracking-wider 
                     transform transition-all duration-300 ease-in-out 
                     hover:scale-105 hover:shadow-2xl hover:brightness-110 
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 
                     flex items-center justify-center space-x-2 relative overflow-hidden 
                     border-b-4 border-blue-800 dark:border-blue-950 button-animation">
        <span class="z-10">Add to Cart</span>
        <svg class="w-6 h-6 z-10" 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 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </button>

      <!-- Secondary Button -->
      <button class="w-full py-4 px-6 bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-500 dark:to-blue-700 text-white text-lg font-semibold uppercase rounded-lg shadow-md tracking-wide 
                     transform transition-all duration-300 ease-in-out 
                     hover:scale-105 hover:shadow-lg hover:brightness-110 
                     focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-500 
                     flex items-center justify-center space-x-2 relative overflow-hidden 
                     border-b-4 border-blue-600 dark:border-blue-800 button-animation">
        <span class="z-10">View Details</span>
        <svg class="w-6 h-6 z-10" 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 12a3 3 0 11-6 0 3 3 0 016 0z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
        </svg>
      </button>

      <!-- Ghost Button -->
      <button class="w-full py-4 px-6 bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 text-lg font-semibold uppercase rounded-lg shadow-lg tracking-wide 
                     border-2 border-blue-600 dark:border-blue-700 
                     transform transition-all duration-300 ease-in-out 
                     hover:scale-105 hover:shadow-xl hover:bg-blue-50 dark:hover:bg-blue-900 
                     focus:outline-none focus:ring-4 focus:ring-blue-100 dark:focus:ring-blue-800 
                     flex items-center justify-center space-x-2 relative overflow-hidden 
                     border-b-4 border-blue-700 dark:border-blue-800 button-animation">
        <span class="z-10">Wishlist</span>
        <svg class="w-6 h-6 z-10" 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.318 6.318a4.5 4.5 0 000 6.364L12 20.73l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.07l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </svg>
      </button>

      <!-- Icon Button with text -->
      <button class="w-full py-4 px-6 bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 text-white text-lg font-medium rounded-lg shadow-md tracking-wide 
                     transform transition-all duration-300 ease-in-out 
                     hover:scale-105 hover:shadow-xl hover:brightness-110 
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700 
                     flex items-center justify-center space-x-2 relative overflow-hidden 
                     border-b-4 border-blue-700 dark:border-blue-900 button-animation">
        <svg class="w-6 h-6 z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H3a2 2 0 00-2 2v6a2 2 0 002 2h14a2 2 0 002-2v-6a2 2 0 00-2-2h-3V6a4 4 0 00-4-4zm2 6V6a2 2 0 10-4 0v2h4zm-4 4a1 1 0 100 2h4a1 1 0 100-2H8z" clip-rule="evenodd" />
        </svg>
        <span class="z-10">Buy Now</span>
      </button>

      <!-- Outline Button -->
      <button class="w-full py-4 px-6 bg-transparent text-blue-600 dark:text-blue-300 text-lg font-semibold uppercase rounded-lg shadow-inner 
                     border-2 border-blue-600 dark:border-blue-500 
                     transform transition-all duration-300 ease-in-out 
                     hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-800 dark:hover:text-blue-100 hover:shadow-md 
                     focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-700 
                     flex items-center justify-center space-x-2 relative overflow-hidden 
                     border-b-4 border-blue-700 dark:border-blue-600 button-animation">
        <span class="z-10">Compare Items</span>
        <svg class="w-6 h-6 z-10" 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 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
        </svg>
      </button>

      <!-- Disabled Button -->
      <button class="w-full py-4 px-6 bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-lg font-medium uppercase rounded-lg shadow-inner cursor-not-allowed 
                     relative overflow-hidden 
                     border-b-4 border-gray-400 dark:border-gray-800 button-animation opacity-70">
        <span class="z-10">Out of Stock</span>
        <svg class="w-6 h-6 z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-8-8a8 8 0 0115.347-3.929L3.929 15.347A8 8 0 012 10z" clip-rule="evenodd" />
        </svg>
      </button>

      <!-- Small Button -->
      <button class="w-full py-3 px-5 bg-gradient-to-br from-sky-400 to-sky-600 dark:from-sky-600 dark:to-sky-800 text-white text-base font-semibold rounded-md shadow-md 
                     transform transition-all duration-300 ease-in-out 
                     hover:scale-105 hover:shadow-lg hover:brightness-110 
                     focus:outline-none focus:ring-4 focus:ring-sky-200 dark:focus:ring-sky-700 
                     flex items-center justify-center space-x-2 relative overflow-hidden 
                     border-b-4 border-sky-700 dark:border-sky-900 button-animation">
        <svg class="w-5 h-5 z-10" 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 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span class="z-10">Quick View</span>
      </button>

      <!-- Large Button -->
      <button class="w-full py-5 px-8 bg-gradient-to-br from-teal-500 to-cyan-700 dark:from-teal-700 dark:to-cyan-900 text-white text-xl font-bold uppercase rounded-lg shadow-2xl tracking-wider 
                     transform transition-all duration-300 ease-in-out 
                     hover:scale-105 hover:shadow-3xl hover:brightness-110 
                     focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-600 
                     flex items-center justify-center space-x-3 relative overflow-hidden 
                     border-b-4 border-teal-800 dark:border-teal-950 button-animation">
        <span class="z-10">Proceed to Checkout</span>
        <svg class="w-7 h-7 z-10" 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="M17 8l4 4m0 0l-4 4m4-4H3" />
        </svg>
      </button>

    </div>
    
    <div class="p-6 sm:p-8 md:p-10 bg-blue-700 dark:bg-blue-950 text-white flex flex-col sm:flex-row justify-between items-center relative overflow-hidden">
      <div class="absolute inset-0 pattern-geometric-reverse opacity-20 dark:opacity-10 pointer-events-none"></div>
      <p class="text-center sm:text-left mb-4 sm:mb-0 text-sm sm:text-base z-10">&copy; 2023 Oceanic Arts. All rights reserved.</p>
      <div class="flex space-x-4 z-10">
        <a href="#" class="text-white hover:text-blue-200 dark:hover:text-blue-400 transition duration-300">Privacy Policy</a>
        <a href="#" class="text-white hover:text-blue-200 dark:hover:text-blue-400 transition duration-300">Terms of Service</a>
      </div>
    </div>
  </div>
</div>

<style>
  /* Art Deco Geometric Pattern */
  .pattern-geometric {
    background-image: radial-gradient(circle at 100% 150%, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent), radial-gradient(circle at 100% 50%, #4a90e2, #4a90e2 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #2a5298 23%, #2a5298 26%, transparent 26%, transparent), radial-gradient(circle at 0 50%, #4a90e2, #4a90e2 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #2a5298 23%, #2a5298 26%, transparent 26%, transparent), radial-gradient(circle at 100% 0, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent), radial-gradient(circle at 0 0, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent);
    background-size: 80px 80px;
    background-position: 0 0, 80px 0, 40px 40px, 120px 40px, 40px 0, 120px 0;
  }

  .pattern-geometric-reverse {
    background-image: radial-gradient(circle at 100% 150%, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent), radial-gradient(circle at 100% 50%, #2a5298, #2a5298 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #4a90e2 23%, #4a90e2 26%, transparent 26%, transparent), radial-gradient(circle at 0 50%, #2a5298, #2a5298 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #4a90e2 23%, #4a90e2 26%, transparent 26%, transparent), radial-gradient(circle at 100% 0, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent), radial-gradient(circle at 0 0, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent);
    background-size: 80px 80px;
    background-position: 0 0, 80px 0, 40px 40px, 120px 40px, 40px 0, 120px 0;
  }
  
  /* Button Hover/Click Animation - Subtle Art Deco Shine */
  .button-animation::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    transform: rotate(45deg);
    opacity: 0;
    transition: all 0.5s ease-out;
    z-index: 0;
  }

  .button-animation:hover::before {
    opacity: 1;
    top: -20%;
    left: -20%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  }
</style>

Art Deco Neon Buttons

Simple, responsive button components with an Art Deco geometric style and a vibrant neon/electric color scheme, suitable for healthcare applications. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans tracking-wide">
  <div class="w-full max-w-4xl p-6 sm:p-8 rounded-lg shadow-2xl bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 transition-colors duration-300">
    <h2 class="text-3xl sm:text-4xl font-bold text-center mb-8 text-gray-800 dark:text-gray-100 uppercase tracking-wider subpixel-antialiased">
      <span class="text-fuchsia-500">Neon</span> <span class="text-teal-400">Art Deco</span> Buttons
    </h2>

    <p class="text-center mb-10 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto leading-relaxed">
      These buttons combine the elegant geometry of Art Deco with a vibrant neon aesthetic, ideal for modern healthcare interfaces. They are designed for clarity and visual impact.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 justify-items-center">

      <!-- Primary Button -->
      <button class="relative group overflow-hidden px-8 py-3 rounded-md text-lg font-semibold text-white dark:text-gray-900
                     bg-gradient-to-br from-fuchsia-600 to-purple-700 
                     dark:from-fuchsia-400 dark:to-purple-500 
                     shadow-lg shadow-fuchsia-500/50 dark:shadow-fuchsia-400/50
                     hover:from-fuchsia-700 hover:to-purple-800 
                     dark:hover:from-fuchsia-500 dark:hover:to-purple-600 
                     focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-700
                     transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-105">
        <span class="relative z-10">Schedule Appointment</span>
        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-fuchsia-400/30 to-transparent group-hover:from-fuchsia-500/50 group-hover:dark:from-fuchsia-600/50 transition-all duration-500 ease-out"></div>
        <div class="absolute inset-0 border-2 border-fuchsia-300 dark:border-fuchsia-700 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </button>

      <!-- Secondary Button -->
      <button class="relative group overflow-hidden px-8 py-3 rounded-md text-lg font-semibold 
                     text-teal-600 dark:text-teal-200 
                     bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800 
                     border-2 border-teal-500 dark:border-teal-400 
                     shadow-lg shadow-teal-500/30 dark:shadow-teal-400/30
                     hover:text-white dark:hover:text-gray-900
                     hover:from-teal-500 hover:to-cyan-600 
                     dark:hover:from-teal-400 dark:hover:to-cyan-500 
                     focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-700
                     transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-105">
        <span class="relative z-10">View Patient History</span>
        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-teal-400/20 to-transparent group-hover:from-teal-500/40 group-hover:dark:from-teal-600/40 transition-all duration-500 ease-out"></div>
        <div class="absolute inset-0 border-2 border-teal-300 dark:border-teal-700 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </button>

      <!-- Tertiary / Ghost Button -->
      <button class="relative group overflow-hidden px-8 py-3 rounded-md text-lg font-semibold 
                     text-lime-600 dark:text-lime-300 
                     bg-transparent 
                     border-2 border-lime-500 dark:border-lime-400 
                     shadow-lg shadow-lime-500/20 dark:shadow-lime-400/20
                     hover:text-white dark:hover:text-gray-900
                     hover:border-transparent
                     hover:bg-gradient-to-br from-lime-500 to-green-600 
                     dark:hover:from-lime-400 dark:hover:to-green-500 
                     focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-700
                     transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-105">
        <span class="relative z-10">Emergency Contact</span>
        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-lime-400/10 to-transparent group-hover:from-lime-500/30 group-hover:dark:from-lime-600/30 transition-all duration-500 ease-out"></div>
        <div class="absolute inset-0 border-2 border-lime-300 dark:border-lime-700 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </button>

      <!-- Icon Button (Example: Plus) -->
      <button class="relative group overflow-hidden w-16 h-16 rounded-full flex items-center justify-center text-white text-3xl
                     bg-gradient-to-br from-blue-600 to-sky-700 
                     dark:from-blue-400 dark:to-sky-500
                     shadow-lg shadow-blue-500/50 dark:shadow-blue-400/50 
                     hover:from-blue-700 hover:to-sky-800 
                     dark:hover:from-blue-500 dark:hover:to-sky-600 
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700
                     transition-all duration-300 ease-out transform hover:rotate-90 hover:scale-110">
        <svg class="relative z-10 w-8 h-8" 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>
        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-400/30 to-transparent group-hover:from-blue-500/50 group-hover:dark:from-blue-600/50 transition-all duration-500 ease-out"></div>
        <div class="absolute inset-0 border-2 border-blue-300 dark:border-blue-700 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </button>

      <!-- Icon Button (Example: Settings) -->
      <button class="relative group overflow-hidden w-16 h-16 rounded-full flex items-center justify-center text-gray-700 dark:text-gray-100 text-3xl
                     bg-white dark:bg-gray-700 
                     border-2 border-gray-300 dark:border-gray-600 
                     shadow-lg shadow-gray-300/30 dark:shadow-gray-700/30
                     hover:text-indigo-600 dark:hover:text-indigo-400
                     hover:border-indigo-500 dark:hover:border-indigo-400
                     focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-700
                     transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-105">
        <svg class="relative z-10 w-8 h-8" 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-.942 3.331.83 2.802 2.39a1.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.942 1.543-.83 3.331-2.39 2.802a1.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.942-3.331-.83-2.802-2.39a1.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-.942-1.543.83-3.331 2.39-2.802a1.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>
        <div class="absolute inset-0 border-2 border-indigo-300 dark:border-indigo-700 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </button>

      <!-- Disabled Button -->
      <button disabled class="relative group overflow-hidden px-8 py-3 rounded-md text-lg font-semibold text-gray-400 dark:text-gray-500
                     bg-gray-200 dark:bg-gray-700 
                     border-2 border-gray-300 dark:border-gray-600 
                     cursor-not-allowed 
                     shadow-inner shadow-gray-300/30 dark:shadow-gray-800/30
                     transition-all duration-300 ease-out">
        <span class="relative z-10">Action Unavailable</span>
      </button>

    </div>
  </div>
</div>

Gradient_Weather_Buttons

A set of responsive buttons for weather forecasting and climate data, featuring a purple/violet gradient with smooth hover transitions and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-black p-4">
  <div class="flex flex-col sm:flex-row gap-4 p-6 rounded-xl shadow-2xl bg-white dark:bg-gray-800 dark:shadow-purple-950/50 backdrop-blur-sm bg-opacity-80 dark:bg-opacity-70">

    <button class="relative group overflow-hidden px-6 py-3 rounded-full text-lg font-semibold text-white transition-all duration-300 ease-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full sm:w-auto">
      <span class="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-600 transition-all duration-500 ease-out group-hover:from-purple-600 group-hover:to-indigo-700"></span>
      <span class="relative z-10">Current Weather</span>
    </button>

    <button class="relative group overflow-hidden px-6 py-3 rounded-full text-lg font-semibold text-white transition-all duration-300 ease-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full sm:w-auto">
      <span class="absolute inset-0 bg-gradient-to-r from-violet-500 to-purple-600 transition-all duration-500 ease-out group-hover:from-violet-600 group-hover:to-purple-700"></span>
      <span class="relative z-10">7-Day Forecast</span>
    </button>

    <button class="relative group overflow-hidden px-6 py-3 rounded-full text-lg font-semibold text-white transition-all duration-300 ease-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full sm:w-auto">
      <span class="absolute inset-0 bg-gradient-to-r from-indigo-500 to-violet-600 transition-all duration-500 ease-out group-hover:from-indigo-600 group-hover:to-violet-700"></span>
      <span class="relative z-10">Climate Trends</span>
    </button>

  </div>
</div>

Art Deco Real Estate Buttons Component

A complex Art Deco inspired button component for real estate platforms, featuring geometric patterns, luxurious grayscale styling, and multiple interactive elements, with full responsiveness and dark mode support.

Open Preview

                <div class="font-sans bg-white dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 flex flex-col items-center justify-center">

  <!-- Component Title -->
  <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-8 sm:mb-10 lg:mb-12 text-center tracking-tight leading-tight uppercase relative">
    <span class="block relative z-10">Property Actions</span>
    <span class="block w-full h-1 bg-gray-300 dark:bg-gray-700 absolute bottom-0 left-0 transform -translate-y-1/2 z-0"></span>
    <span class="block w-full h-1 bg-gray-300 dark:bg-gray-700 absolute top-0 left-0 transform translate-y-1/2 z-0"></span>
  </h1>

  <!-- Buttons Container -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 max-w-7xl w-full">

    <!-- Primary Action Button: View Details -->
    <button aria-label="View Property Details" class="group relative overflow-hidden bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-800 text-gray-900 dark:text-white font-medium py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 0M17.582 17.582A2 2 0 0118 20.414.418 2.766 2.766 0 0118.707 20l2.121-2.121a1 1 0 011.414 0l.707.707a1 1 0 010 1.414l-2.121 2.121a1 1 0 01-1.414 0L18 20.414A2 2 0 0117.586 18H2.414a2 2 0 01-1.414-.586l-.707-.707a1 1 0 010-1.414l2.121-2.121a1 1 0 011.414 0l.707.707a.418 2.766 2.766 0 01.293.293z"></path></svg>
        <span class="uppercase tracking-wider">View Details</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-500 dark:bg-gray-400 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Secondary Action Button: Schedule Tour -->
    <button aria-label="Schedule a Property Tour" class="group relative overflow-hidden bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200 font-medium py-3 px-6 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-200 dark:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <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="M8 7V3m8 4V3m-9 8h.01M7 12h.01M7 15h.01M17 12h.01M17 15h.01M17 18h.01M2 20h20a2 2 0 002-2V6a2 2 0 00-2-2H2a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span class="">Schedule Tour</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-400 dark:bg-gray-500 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Tertiary Action Button: Save to Favorites -->
    <button aria-label="Save Property to Favorites" class="group relative overflow-hidden bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 text-gray-700 dark:text-gray-300 font-medium py-3 px-6 rounded-lg shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-100 dark:border-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <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="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>
        <span class="">Save Property</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-300 dark:bg-gray-600 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Special Feature Button: Virtual Tour -->
    <button aria-label="Take a Virtual Tour" class="group relative overflow-hidden bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-600 dark:to-gray-700 text-gray-900 dark:text-white font-medium py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-400 dark:border-gray-500 focus:outline-none focus:ring-4 focus:ring-gray-500 dark:focus:ring-gray-500 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
       <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="M4 7v10h16V7H4zm0 0l-2-2m2 2l-2-2m2 2l2-2m-2 2l-2-2m2 2l2-2m8 0h.01M7 7h.01M7 17h.01M17 7h.01M17 17h.01"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 9l-4 3m0 0l4 3m-4-3H4"></path></svg>
        <span class="uppercase tracking-wider">Virtual Tour</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-600 dark:bg-gray-300 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Informational Button: Get Directions -->
    <button aria-label="Get Directions to Property" class="group relative overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 text-gray-700 dark:text-gray-300 font-medium py-3 px-6 rounded-lg shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-150 dark:border-gray-850 focus:outline-none focus:ring-4 focus:ring-gray-250 dark:focus:ring-gray-850 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <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="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.553-.832L9 7m0 13l6-3m-6 3V7m6 10l4.447 2.224A1 1 0 0021 18.382V7.618a1 1 0 00-1.553-.832L15 11m0 9V11m0 0l-1 1m4-4l-1 1"></path></svg>
        <span class="">Get Directions</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-200 dark:bg-gray-700 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Communication Button: Contact Agent -->
    <button aria-label="Contact the Real Estate Agent" class="group relative overflow-hidden bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-900 dark:text-gray-100 font-medium py-3 px-6 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
        <span class="uppercase tracking-wider">Contact Agent</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-500 dark:bg-gray-400 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

  </div>

  <!-- Custom CSS for Art Deco Polygon -->
  <style>
    .clip-path-polygon-button {
        clip-path: polygon(0% 0%, 10% 100%, 100% 100%, 90% 0%); /* Example of a geometric pattern (parallelogram) */
        /* Adjust values for diverse geometric shapes to fit Art Deco aesthetic */
    }

    /* To make dark mode toggleable for easy viewing if integrated */
     body.dark-mode .dark\:bg-gray-900 { background-color: #1a202c; }
     body.dark-mode .dark\:text-white { color: #ffffff; }
     body.dark-mode .dark\:from-gray-700 { background-image: linear-gradient(to bottom right, #4a5568, #2d3748); }
     body.dark-mode .dark\:to-gray-800 { background-image: linear-gradient(to bottom right, #4a5568, #2d3748); }
    /* ... other dark mode styles ... */
  </style>

</div>

Retro_Rainbow_Buttons_Component

A collection of retro-themed gradient rainbow buttons designed for photography galleries and portfolios, with moderate complexity and full responsiveness and dark mode support.

Open Preview

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

  <div class="container mx-auto p-4 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-2xl transition-colors duration-300">
    <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-10 tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 dark:from-purple-400 dark:via-pink-300 dark:to-red-300 drop-shadow-lg">
      Capture the Moment
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8 justify-items-center">

      <!-- Button 1: Classic Retro -->
      <button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-lg 
                     bg-gradient-to-br from-yellow-400 via-orange-500 to-red-600 
                     text-white font-bold uppercase tracking-wider text-lg 
                     transition-all duration-300 
                     transform hover:-translate-y-1 hover:scale-105 
                     focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-500/50">
        <span class="absolute inset-0 border-4 border-white dark:border-gray-900 rounded-lg group-hover:rotate-6 group-hover:scale-110 transition-transform duration-300"></span>
        <span class="relative z-10">View Gallery</span>
      </button>

      <!-- Button 2: Striped Retro -->
      <button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-lg 
                     bg-gradient-to-b from-blue-500 via-purple-600 to-pink-500 
                     text-white font-bold uppercase tracking-wider text-base 
                     transition-all duration-300 
                     transform hover:-skew-x-6 hover:scale-105 
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-500/50">
        <span class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/30 to-transparent 
                     w-full h-full rotate-45 transform -translate-x-full 
                     group-hover:translate-x-full transition-transform duration-700"></span>
        <span class="relative z-10">Portfolio</span>
      </button>

      <!-- Button 3: Gradient Border -->
      <button class="relative group px-7 py-3 rounded-lg 
                     bg-gray-200 dark:bg-gray-700 
                     text-gray-800 dark:text-gray-200 
                     font-bold uppercase tracking-wide text-lg 
                     transition-all duration-300 
                     transform hover:scale-105 hover:shadow-xl 
                     focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-500/50">
        <div class="absolute inset-0.5 rounded-md bg-white dark:bg-gray-800"></div>
        <div class="absolute inset-0.5 rounded-md bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 
                    animate-pulse group-hover:animate-none 
                    opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
        <span class="relative z-10">My Work</span>
      </button>

      <!-- Button 4: Neon Glow Effect -->
      <button class="relative group px-8 py-3 rounded-lg shadow-lg 
                     bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500 
                     text-white font-bold uppercase tracking-wider text-base 
                     transition-all duration-300 
                     transform hover:translate-y-px hover:shadow-2xl 
                     focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-500/50">
        <span class="absolute inset-0.5 rounded-lg 
                     bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500 
                     filter blur-md opacity-75 group-hover:opacity-100 transition-opacity duration-300"></span>
        <span class="relative z-10 
                     drop-shadow-[0_0_5px_rgba(255,255,255,0.7)] group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,1)] transition-all duration-300">About Me</span>
      </button>

      <!-- Button 5: Square Pixelated -->
      <button class="relative group overflow-hidden px-8 py-3 
                     bg-gradient-to-br from-teal-400 via-lime-500 to-yellow-500 
                     text-white font-bold uppercase tracking-wider text-lg 
                     shadow-lg transform transition-all duration-300 
                     hover:-translate-x-1 hover:-translate-y-1 
                     active:translate-x-0 active:translate-y-0 
                     focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-500/50" 
              style="clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%);">
        <span class="absolute inset-0 bg-black/10 dark:bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></span>
        <span class="relative z-10 drop-shadow-md">Contact</span>
      </button>

      <!-- Button 6: Multi-layered 3D -->
      <button class="relative group px-8 py-3 
                     bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 
                     text-white font-bold uppercase tracking-wider text-base 
                     shadow-[5px_5px_0_0_rgba(0,0,0,0.2)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,0.1)] 
                     transition-all duration-300 transform 
                     hover:-translate-x-1 hover:-translate-y-1 
                     hover:shadow-[7px_7px_0_0_rgba(0,0,0,0.3)] dark:hover:shadow-[7px_7px_0_0_rgba(255,255,255,0.15)] 
                     focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-500/50">
        <span class="relative z-10">Services</span>
        <span class="absolute inset-0 border-2 border-white dark:border-gray-900 -translate-x-1 -translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></span>
      </button>

    </div>

    <div class="mt-16 text-center text-gray-600 dark:text-gray-400 text-sm md:text-base">
      <p>Explore my photography journey, one click at a time.</p>
      <p class="mt-2">© <span id="current-year"></span> Your Photography Name. All rights reserved.</p>
    </div>

  </div>
</div>

<script>
  document.getElementById('current-year').textContent = new Date().getFullYear();
</script>

Interactive Photo Gallery Buttons

A set of responsive, interactive buttons designed for photo galleries and photographer portfolios, featuring a forest/green color palette and subtle micro-interaction effects for user engagement. Includes dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center p-4 min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8">Explore Galleries</h2>
  <div class="flex flex-wrap justify-center gap-4">

    <!-- Primary Button: View All Photos -->
    <button class="group relative inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500
                   dark:bg-emerald-700 dark:hover:bg-emerald-600 dark:focus:ring-emerald-600
                   overflow-hidden transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
      <span class="absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-emerald-800 dark:bg-emerald-900"></span>
      <span class="relative z-10 flex items-center">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path>
        </svg>
        View All Photos
      </span>
    </button>

    <!-- Secondary Button: Categories -->
    <button class="group relative inline-flex items-center justify-center px-6 py-3 border border-emerald-600 text-base font-medium rounded-full text-emerald-700 bg-white hover:bg-emerald-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500
                   dark:border-emerald-600 dark:text-emerald-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-emerald-600
                   overflow-hidden transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
      <span class="absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-emerald-100 dark:bg-emerald-900"></span>
      <span class="relative z-10 flex items-center">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M7 3a1 1 0 00-1 1v1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1V6a1 1 0 00-1-1H7V4a1 1 0 00-1-1zM5 7h4v2H5V7zm8-4a1 1 0 00-1 1v1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1V6a1 1 0 00-1-1h-3V4a1 1 0 00-1-1zM11 7h4v2h-4V7zM4 13a1 1 0 00-1 1v1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 00-1-1H4zm1 2h4v2H5v-2zm8-2a1 1 0 00-1 1v1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 00-1-1h-3zm1 2h4v2h-4v-2z"></path>
        </svg>
        Categories
      </span>
    </button>

    <!-- Tertiary Button: Hire Me -->
    <button class="group relative inline-flex items-center justify-center px-6 py-3 border-2 border-emerald-500 text-base font-medium rounded-full text-emerald-600 hover:text-white bg-transparent hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500
                   dark:border-emerald-400 dark:text-emerald-400 dark:hover:text-white dark:hover:bg-emerald-500 dark:focus:ring-emerald-500
                   overflow-hidden transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
      <span class="absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-emerald-600 dark:bg-emerald-500"></span>
      <span class="relative z-10 flex items-center">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"></path>
        </svg>
        Hire Me
      </span>
    </button>

  </div>

  <p class="mt-8 text-sm text-gray-500 dark:text-gray-400">
    Click to explore more, with subtle visual feedback.
  </p>
</div>