HTML + CSSBoutons

Touche mécanique

Une touche sculptée sur une plaque de clavier, qui s'enfonce avec une vraie course et lance un anneau de lumière.

Réglages

16px
1x

Code

<div class="uvq01-key"><span class="rp" aria-hidden="true"></span><button class="k" type="button"><span class="cap"><span class="t">Envoyer</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 5v7a3 3 0 0 1-3 3H6"/><path d="M10 11l-4 4 4 4"/></svg></span></button></div>

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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Boutons

Voir tout : Boutons

Où l’utiliser

Les claviers mécaniques ont leurs passionnés, et ce bouton leur emprunte leur allure : une touche sculptée au dessus concave avec sa légende, posée sur une plaque anodisée éclairée par en dessous. Chaque appui enfonce la touche avec une vraie course et déclenche une onde lumineuse réactive, y compris avec Entrée ou Espace. Il convient aux outils pour développeurs, aux aides sur les raccourcis et aux sites de jeux vidéo.

Prenez la couleur principale pour la touche, comme une touche Échap orange classique, et la secondaire pour la lueur RGB. Les libellés courts comme Envoyer, Lancer ou Entrée sont les plus naturels, et plusieurs touches côte à côte font une légende de raccourcis crédible.