Bouton à reflet lumineux
Au survol, un reflet de lumière traverse le bouton en diagonale pendant qu'il se soulève légèrement.
Réglages
Code
<button class="uv-shine">Commencer</button>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Boutons
Où l’utiliser
Ce bouton à reflet convient à l'appel à l'action principal d'une landing page de logiciel : « Essai gratuit », « Commencer » ou « Créer un compte ». La lumière passe une seule fois à l'arrivée du curseur, comme un reflet sur une vitrine, et le bouton monte d'un cheveu. C'est l'effet de survol CSS classique pour un bouton brillant.
Il rend mieux sur une couleur profonde et saturée ; sur des tons pastel, le reflet blanc se voit à peine. Gardez-le pour un seul bouton par écran. Si tout brille, plus rien ne ressort et la page finit par ressembler à une machine à sous.