Composants Boutons 3D_Healthcare_Buttons_Component
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.
Aperçu

HTML Code

<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>
Composants associés

Composant Boutons

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

Un ensemble complexe de boutons skeuomorphes avec une palette de couleurs vives, conçu pour les interfaces de médias sociaux. Comprend une mise en page réactive et la prise en charge du mode sombre, imitant les boutons du monde réel.
Ouvrir