Composant Suivre le bouton
Un composant de bouton de suivi/désabonnement réactif adapté aux sites Web d’événements et de conférences, avec des transitions de dégradé, la prise en charge du mode sombre et une couleur d’accentuation vive. Il comprend un effet de survol subtil et modifie le texte et l’arrière-plan au clic (simulé).
HTML Code
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-[150px]">
<button class="follow-button group relative overflow-hidden px-6 py-2 rounded-full font-semibold text-lg transition-all duration-300 ease-out shadow-md
bg-gradient-to-r from-red-500 to-purple-600
hover:from-purple-600 hover:to-red-500
text-white dark:text-gray-100
focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-red-800">
<span class="relative z-10 block transition-transform duration-300 ease-in-out group-hover:scale-105" data-text-initial="Follow" data-text-followed="Following">Follow</span>
<span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-10 pointer-events-none"></span>
</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('.follow-button');
const buttonText = button.querySelector('span[data-text-initial]');
let isFollowing = false;
button.addEventListener('click', () => {
isFollowing = !isFollowing;
if (isFollowing) {
buttonText.textContent = buttonText.dataset.textFollowed;
button.classList.remove('from-red-500', 'to-purple-600', 'hover:from-purple-600', 'hover:to-red-500');
button.classList.add('from-gray-400', 'to-gray-500', 'dark:from-gray-700', 'dark:to-gray-800', 'hover:from-gray-500', 'hover:to-gray-400', 'dark:hover:from-gray-800', 'dark:hover:to-gray-700',
'text-gray-800', 'dark:text-gray-200');
button.classList.remove('text-white', 'dark:text-gray-100');
} else {
buttonText.textContent = buttonText.dataset.textInitial;
button.classList.remove('from-gray-400', 'to-gray-500', 'dark:from-gray-700', 'dark:to-gray-800', 'hover:from-gray-500', 'hover:to-gray-400', 'dark:hover:from-gray-800', 'dark:hover:to-gray-700',
'text-gray-800', 'dark:text-gray-200');
button.classList.add('from-red-500', 'to-purple-600', 'hover:from-purple-600', 'hover:to-red-500',
'text-white', 'dark:text-gray-100');
}
});
});
</script>
</div>Composants associés
3D_Analogous_Simple_Follow_Button_Component
Un bouton « Suivre » simple et réactif avec une esthétique 3D et une palette de couleurs analogue, adapté à un site de portfolio, prenant en charge les modes clair et sombre.
Composant Suivre le bouton
Un bouton « Suivre » épuré et minimaliste conçu avec une palette de couleurs rétro/vintage, adapté à un tableau de bord ou à une page de profil. Il dispose d’un état de survol interactif et d’une prise en charge du mode sombre, incarnant les principes de la typographie suisse et internationale.
Composant Suivre le bouton
Un composant de bouton de suivi réactif conçu selon les principes de Material Design, avec prise en charge du mode sombre et des styles personnalisés à l’aide de Tailwind CSS.