Composant du bouton de suivi cyberpunk
Il s’agit d’un composant de bouton « Suivre » complexe, sur le thème du cyberpunk, pour les outils CRM/professionnels, avec une palette de couleurs forêt/vert, des arrière-plans sombres et des accents néon brillants, avec une réactivité totale et une prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center p-4 bg-gray-900 min-h-screen dark:bg-black font-mono relative overflow-hidden">
<!-- Cyberpunk background grid elements -->
<div class="absolute inset-0 z-0 opacity-10">
<div class="absolute inset-0 bg-gradient-to-br from-green-900 via-gray-900 to-green-900 animate-pulse-slow"></div>
<div class="absolute inset-0 bg-grid-pattern-small md:bg-grid-pattern-large opacity-5"></div>
<div class="absolute inset-0 bg-dots-pattern opacity-5"></div>
</div>
<div class="bg-gradient-to-br from-gray-800 to-gray-950 dark:from-gray-950 dark:to-black p-6 md:p-8 rounded-2xl shadow-neon-green border border-green-700/50 relative z-10 w-full max-w-md mx-auto transform hover:scale-[1.01] transition-transform duration-300 ease-in-out">
<!-- Glitch effect pseudo-element for aesthetic -->
<div class="absolute inset-0 rounded-2xl pointer-events-none after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-br after:from-green-500/20 after:via-transparent after:to-green-500/20 after:animate-glitch after:mix-blend-overlay"></div>
<div class="flex flex-col items-center space-y-6">
<!-- Profile Card Start -->
<div class="w-full bg-gray-900 dark:bg-black p-4 rounded-xl border border-green-800 shadow-inner-neon relative">
<div class="relative w-24 h-24 mx-auto mb-4 rounded-full border-2 border-green-400 overflow-hidden shadow-md shadow-green-500/30 ring-2 ring-green-600 ring-offset-2 ring-offset-gray-900">
<img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
<div class="absolute inset-0 bg-gradient-to-br from-green-500/30 to-transparent animate-pulse-fast opacity-50"></div>
</div>
<h2 class="text-2xl font-bold text-green-400 text-center uppercase tracking-wide mb-2">Ava Lux</h2>
<p class="text-sm text-green-200 text-center mb-4">Product Lead at CyberCorp Solutions</p>
<div class="grid grid-cols-2 gap-2 text-center text-green-300 text-sm">
<div>
<span class="block font-bold text-green-400">1.2k</span>
<span class="block">Followers</span>
</div>
<div>
<span class="block font-bold text-green-400">987</span>
<span class="block">Following</span>
</div>
</div>
<div class="mt-4 text-xs text-center text-gray-400 border-t border-green-800 pt-3 flex items-center justify-center">
<svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
</svg>
Neo-Tokyo, Block 7
</div>
</div>
<!-- Profile Card End -->
<!-- Follow Button -->
<button class="relative w-full py-3 px-6 text-xl font-bold text-black uppercase bg-green-400 rounded-lg overflow-hidden group shadow-lg shadow-green-500/50 transform transition duration-300 ease-in-out hover:scale-105 active:scale-95 button-glow-green">
<span class="relative z-10">+ Follow</span>
<div class="absolute inset-0 bg-green-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="absolute inset-0 border-2 border-green-600 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="absolute top-1/2 left-1/2 w-4 h-4 bg-green-200 rounded-full blur-sm opacity-0 group-hover:opacity-100 group-hover:animate-ping-small origin-center transition-all duration-500"></div>
</button>
<!-- Message & Options Buttons -->
<div class="grid grid-cols-2 gap-4 w-full">
<button class="relative py-3 px-4 text-lg font-bold text-green-300 uppercase bg-gray-800 dark:bg-gray-900 rounded-lg border border-green-700 overflow-hidden group shadow-md shadow-gray-700/50 hover:border-green-400 hover:text-green-200 transition duration-300 ease-in-out button-hover-glitch">
<span class="relative z-10">Message</span>
</button>
<button class="relative py-3 px-4 text-lg font-bold text-green-300 uppercase bg-gray-800 dark:bg-gray-900 rounded-lg border border-green-700 overflow-hidden group shadow-md shadow-gray-700/50 hover:border-green-400 hover:text-green-200 transition duration-300 ease-in-out button-hover-glitch">
<span class="relative z-10">Profile</span>
</button>
</div>
<!-- Status / Connection Indicator -->
<div class="flex items-center text-sm text-green-400 mt-4">
<span class="relative flex h-3 w-3 mr-2">
<span class="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-600"></span>
</span>
<span>Active Connection // Online</span>
</div>
</div>
<!-- Bottom UI Elements / Accent Lines -->
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-1/2 h-1 bg-green-600 rounded-full shadow-neon-green blur-[1px] opacity-70"></div>
<div class="absolute top-0 left-0 w-4 h-4 border-l-2 border-t-2 border-green-500 rounded-tl-lg opacity-50"></div>
<div class="absolute top-0 right-0 w-4 h-4 border-r-2 border-t-2 border-green-500 rounded-tr-lg opacity-50"></div>
<div class="absolute bottom-0 left-0 w-4 h-4 border-l-2 border-b-2 border-green-500 rounded-bl-lg opacity-50"></div>
<div class="absolute bottom-0 right-0 w-4 h-4 border-r-2 border-b-2 border-green-500 rounded-br-lg opacity-50"></div>
</div>
</div>
<style>
/* Base styles for dark mode */
:root {
--tw-shadow-neon-green: 0 0px 10px rgba(50, 205, 50, 0.5), 0 0 20px rgba(50, 205, 50, 0.3), 0 0 30px rgba(50, 205, 50, 0.2);
--tw-shadow-inner-neon: inset 0 0 5px rgba(50, 205, 50, 0.4), inset 0 0 10px rgba(50, 205, 50, 0.2);
--color-green-neon: #32CD32; /* LimeGreen */
--color-green-dark: #1A4d2e; /* Darker Green */
}
/* Tailwind specific overrides for custom patterns */
.bg-grid-pattern-small {
background-image: linear-gradient(to right, rgba(50,205,50,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(50,205,50,0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
.bg-grid-pattern-large {
background-image: linear-gradient(to right, rgba(50,205,50,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(50,205,50,0.1) 1px, transparent 1px);
background-size: 40px 40px;
}
.bg-dots-pattern {
background-image: radial-gradient(circle, rgba(50,205,50,0.2) 1px, transparent 1px);
background-size: 10px 10px;
}
/* Custom shadow utilities */
.shadow-neon-green {
box-shadow: var(--tw-shadow-neon-green);
}
.shadow-inner-neon {
box-shadow: var(--tw-shadow-inner-neon);
}
/* Keyframes for animations */
@keyframes pulse-slow {
0%, 100% { opacity: 0.1; }
50% { opacity: 0.2; }
}
@keyframes pulse-fast {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.7; }
}
@keyframes ping-small {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.5); opacity: 0; }
}
@keyframes glitch {
0% { transform: translate(0, 0); opacity: 0.3; }
20% { transform: translate(-2px, 2px); opacity: 0.6; }
40% { transform: translate(-2px, -2px); opacity: 0.4; }
60% { transform: translate(2px, 2px); opacity: 0.7; }
80% { transform: translate(2px, -2px); opacity: 0.5; }
100% { transform: translate(0, 0); opacity: 0.3; }
}
/* Apply animations */
.animate-pulse-slow {
animation: pulse-slow 8s infinite ease-in-out;
}
.animate-pulse-fast {
animation: pulse-fast 2s infinite ease-in-out;
}
.animate-ping-small {
animation: ping-small 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.animate-glitch {
animation: glitch 0.5s infinite alternate;
}
/* Button Glitch Effect for hovers */
.button-hover-glitch:hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 49%, var(--color-green-neon) 50%, transparent 51%);
background-size: 200% 100%;
animation: glitch-line 0.3s steps(1) infinite alternate;
opacity: 0.2;
}
.button-hover-glitch:hover::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, transparent 49%, var(--color-green-neon) 50%, transparent 51%);
background-size: 200% 100%;
animation: glitch-line 0.3s steps(1) infinite reverse alternate;
opacity: 0.2;
}
@keyframes glitch-line {
0% { background-position: 0 0; }
100% { background-position: -200% 0; }
}
/* Button Glow Effect */
.button-glow-green {
position: relative;
overflow: hidden;
z-index: 1;
transition: all 0.3s ease;
}
.button-glow-green::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(50,205,50,0.6) 0%, transparent 70%);
animation: rotate-glow 4s linear infinite;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.button-glow-green:hover::before {
opacity: 1;
}
@keyframes rotate-glow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Dark mode specific styles */
.dark .bg-gradient-to-br.from-gray-800.to-gray-950 {
background-image: linear-gradient(to bottom right, #0a0a0a, #000000);
}
.dark .shadow-neon-green {
box-shadow: 0 0px 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.5), 0 0 30px rgba(0, 255, 0, 0.3);
}
.dark .shadow-inner-neon {
box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.3);
}
.dark .text-green-400 {
color: #00FF00; /* Brighter green for dark mode */
}
.dark .border-green-700,
.dark .border-green-800 {
border-color: #008f00;
}
.dark .bg-green-400 {
background-color: #00e600;
}
</style>Composants associés
Bouton Suivre
Un simple bouton de suivi avec un style Material Design, des effets réactifs et la prise en charge du thème sombre.
Glassmorphism Suivre le bouton
Composant de bouton de suivi Glassmorphism pour les médias sociaux avec thème sombre
Composant Suivre le bouton - Monospace/Style de développeur
Un composant de bouton de suivi complexe et interactif conçu pour les sites Web d’actualités/journalisme, avec une esthétique monospace/développeur avec des couleurs aux tons de bijou et une réactivité totale, y compris la prise en charge du mode sombre.