Pixel button

Ce qui est inclus

Un bouton pilule noir cerné d’un faisceau vert qui tourne, et qui allume au survol une trame de 495 petits carrés : ils grandissent depuis le centre, scintillent, puis se dissolvent quand le pointeur s’en va. Deux fichiers plus la police — aucune dépendance, aucune étape de build, aucune requête externe.

Le composant ne fabrique aucun élément : il enrichit le <button> ou le <a> qu’il trouve, et lui ajoute une seule chose, le canevas de la trame. Le reste — la pilule, le contour, le faisceau, son élargissement au survol, le halo, le contour du texte — tient entièrement dans la feuille de style.

Fonctionnalités

• Complet sans JavaScript — sans le script, il ne manque que la trame. Le faisceau tourne, le halo s’allume, le bouton reste un bouton.
• Le clavier voit la même chose — Tab déclenche le faisceau, le halo et la trame, et dessine un anneau de focus. Le modèle d’origine ne réagissait qu’à la souris.
• Une onde au clic — un anneau traverse la trame depuis le point cliqué et fait enfler les carrés sur son passage, pendant que la trame s’éclaircit.
• Une variable pour l’échelle — marge intérieure, arrondi, halo et contour du texte dérivent tous de la taille du texte et suivent ensemble.
• Deux modes — la trame répond au survol, ou scintille en permanence avec data-pixel-button="always".
• Cinq habillages — vert, rouge, ambre, magenta, et une version pour fond clair. Chacun n’est qu’une poignée de variables.

Le poser dans une page

Deux fichiers à charger, puis le balisage habituel :

<link rel="stylesheet" href="pixel-button.css">
<script src="pixel-button.js" defer></script>

<button class="pixel-button" type="button" data-pixel-button>
  <span class="pixel-button__label">Get unlimited access</span>
</button>

L’attribut data-pixel-button suffit : le composant s’installe au chargement de la page. Le <span> n’est pas décoratif — il porte le contour du texte et le plan au-dessus de la trame. Copiez aussi le fichier de police à côté du CSS : la largeur du bouton en dépend directement.

Ce qu’il faut savoir

• La trame ne grossit pas avec le bouton. Doubler la taille du texte ajoute des carrés au lieu de les agrandir — c’est le comportement du modèle, et c’est le bon : une trame agrandie n’est plus une trame. Deux variables permettent l’inverse si vous le préférez.
• Le mode permanent occupe une trame d’animation. Il est fait pour le bouton principal d’une page, pas pour une grille de dix. Au repos, en mode survol, le composant ne consomme rien : la boucle s’arrête d’elle-même.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site et n’utilise jamais innerHTML — vérifié en servant le dossier en HTTP avec l’en-tête, pas supposé.
• Le dessin vient d’ailleurs. Les proportions et les lois d’animation reprennent celles d’un composant de code Framer, relevées sur la page d’origine : géométrie à 0,000 px d’écart, largeur du texte à 144,000 px contre 144. Le détail des mesures et des huit écarts assumés est dans le README.md.