Rechercher des composants

Catégories

Boutons

Éléments interactifs qui déclenchent des actions

3D_Healthcare_Buttons_Component

Un composant complexe de boutons inspiré de la 3D pour les applications de santé, doté d’un design monochrome en noir et blanc avec une couleur d’accentuation vive, une mise en page réactive et une prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Boutons de divertissement ludiques

Un ensemble de boutons ludiques et amusants conçus pour une plate-forme de divertissement ou de médias, avec des couleurs sourdes/désaturées et des éléments arrondis. Réactif et inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant Boutons

Composant de bouton simple et réactif avec un design en niveaux de gris inspiré du papier/de l’impression, adapté aux plates-formes éducatives, prenant en charge les modes clair et sombre.

Ouvrir Aperçu

                <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

Un ensemble réactif de boutons d’entreprise de style 3D avec une palette de couleurs chaudes de coucher de soleil, adapté aux sites Web d’entreprise. Comprend la prise en charge du mode sombre et des effets de survol interactifs.

Ouvrir Aperçu

                <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

Un ensemble complexe de boutons e-commerce d’inspiration Art déco avec des motifs géométriques et des tons luxueux Ocean/Blue, optimisés pour la réactivité et le mode sombre.

Ouvrir Aperçu

                <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>

Boutons Néon Art Déco

Composants de boutons simples et réactifs avec un style géométrique Art déco et une palette de couleurs néon/électrique vibrantes, adaptés aux applications de soins de santé. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un ensemble de boutons réactifs pour les prévisions météorologiques et les données climatiques, avec un dégradé violet/violet avec des transitions de survol fluides et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant de boutons immobiliers Art Déco

Un composant de bouton complexe d’inspiration Art déco pour les plateformes immobilières, avec des motifs géométriques, un style luxueux en niveaux de gris et de multiples éléments interactifs, avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Une collection de boutons arc-en-ciel dégradés à thème rétro conçus pour les galeries de photographie et les portfolios, avec une complexité modérée et une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Boutons de galerie de photos interactifs

Un ensemble de boutons réactifs et interactifs conçus pour les galeries de photos et les portfolios de photographes, avec une palette de couleurs forêt/vert et de subtils effets de micro-interaction pour l’engagement de l’utilisateur. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>