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.
HTML Code
<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>Composants associés
Composant Boutons
Un ensemble de boutons interactifs pour une application CRM/Business Tools, avec des micro-interactions, des couleurs de bijou et une réactivité totale avec prise en charge du mode sombre.
Composant Boutons
Une collection de boutons minimalistes et au design plat pour diverses actions, en utilisant une palette de couleurs complémentaires. Entièrement réactif avec prise en charge du mode sombre.
Boutons de médias sociaux Neumorphism
Un composant de bouton simple de style Neumorphism pour les interfaces de médias sociaux, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Le bouton utilise une palette de couleurs analogue et des ombres subtiles pour créer un aspect doux et extrudé.