Bouton allumette
Une boîte d'allumettes : un clic fait jaillir une étincelle et allume l'allumette, un second l'éteint dans un filet de fumée.
Réglages
Code
<button class="uvq01-mch" type="button" aria-pressed="false"><span class="m" aria-hidden="true"><span class="fl"><i></i><i></i></span><span class="sm"></span></span><span class="t">Allumer</span><span class="st" aria-hidden="true"></span></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
Voir tout : BoutonsOù l’utiliser
Cet interrupteur est dessiné comme le flanc d'une boîte d'allumettes, avec un cadre imprimé, un grattoir rugueux et une allumette à gauche. Au survol, la tête rougeoie, au clic des étincelles jaillissent et une flamme en CSS vacille au-dessus pendant que la boîte se réchauffe. La tête noircit en brûlant, et l'éteindre fait monter une volute de fumée. Idéal pour une boutique de bougies ou un mode sombre.
La couleur principale est la flamme et la secondaire la tête de l'allumette : une flamme bleue de gaz ou une tête verte sont des variantes faciles. L'état passe par aria-pressed, et avec le mouvement réduit la flamme reste stable au lieu de vaciller.