3D_Healthcare_Buttons_Component
A complex 3D-inspired buttons component for healthcare applications, featuring a black and white monochrome design with a bright accent color, responsive layout, and dark mode support.
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>Related Components
Neumorphism Buttons Component
A complex Neumorphism-styled button component with vibrant colors, responsive design, and dark mode support, suitable for business/corporate websites.
Interactive Photo Gallery Buttons
A set of responsive, interactive buttons designed for photo galleries and photographer portfolios, featuring a forest/green color palette and subtle micro-interaction effects for user engagement. Includes dark mode support.
Glassmorphism Buttons Component
Glassmorphism Buttons using Earth Tones for responsive Portfolio site with dark mode