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 composant de boutons au design minimaliste / plat avec une palette de couleurs en niveaux de gris. Il convient aux sites Web d’entreprise et a une complexité modérée avec certaines fonctionnalités interactives. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS.
Composant Boutons neumorphes
Un composant de bouton doté d’un style de conception neumorphe avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
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.