Componenti Pulsanti 3D_Healthcare_Buttons_Component
3D_Healthcare_Buttons_Component

Un complesso componente di pulsanti ispirato al 3D per applicazioni sanitarie, caratterizzato da un design monocromatico in bianco e nero con un colore d'accento brillante, un layout reattivo e il supporto della modalità scura.
Anteprima

Codice HTML

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

Retro_Rainbow_Buttons_Component

Una raccolta di pulsanti arcobaleno sfumati a tema retrò progettati per gallerie fotografiche e portfolio, con complessità moderata e piena reattività e supporto per la modalità scura.
Aperto
Componente dei pulsanti immobiliari Art Deco

Un complesso componente pulsante ispirato all'Art Déco per piattaforme immobiliari, caratterizzato da motivi geometrici, lussuoso stile in scala di grigi e molteplici elementi interattivi, con piena reattività e supporto per la modalità oscura.
Aperto
Componente Pulsanti

Una serie di pulsanti interattivi progettati per un portfolio, con microinterazioni, una combinazione di colori complementari e una reattività completa con supporto della modalità scura.
Aperto