HTML + CSSBoutons

Bouton à bordure dessinée

Au survol, les quatre côtés de la bordure se tracent l'un après l'autre, comme au crayon.

Réglages

16px
1x

Code

<button class="uv-draw"><b></b><b></b><b></b><b></b>Explorer</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 à bordure dessinée a un côté éditorial. Il convient au « Voir les projets » d'un cabinet d'architectes, au « Découvrir la collection » d'un lookbook de mode ou au bouton de contact d'un site de photographe. Les traits font le tour du rectangle côté par côté, comme un petit croquis plutôt qu'un flash.

Le tour complet prend presque une seconde, et ceux qui bougent vite la souris n'en voient que la moitié. Si cela vous gêne, augmentez la vitesse. Il s'intègre mieux dans une mise en page minimaliste, avec des filets fins et de l'espace, que sur une page très colorée.