Glass Morphing Button
Un bouton de verre qui change de forme au survol, en CSS pur : marges latérales 36 → 52 px, coins 14 → 20 px, bordure et halo intérieur violets, zoom de 5 % — il passe de 161 × 46 à 203 × 53 px à l'écran et s'étire vers la main, sur deux halos colorés qui flottent derrière.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Un vrai <button class="glass-morph-btn"> posé dans une petite scène .glass-btn-scene de 300 × 180 px. Derrière lui, deux halos — violet #8b5cf6 de 100 px en haut à gauche, cyan #06b6d4 de 80 px en bas à droite — floutés à 40 px et animés par glassBtnOrb (5 s, le second en sens inverse) : les keyframes étant symétriques, le sens inverse donne le même trajet : ils glissent ensemble de 20 px vers la droite et 15 px vers le haut, puis reviennent. Le bouton est un blanc à 8 % avec backdrop-filter: blur(20px), une bordure blanche à 15 %, des coins de 14 px, un libellé blanc en capitales (14,4 px, graisse 600, espacement de 1 px), une ombre noire 0 4px 16px et, en ::before, un reflet à 135° de blanc à 15 % vers transparent. Le fond sombre #0a0a0f vient du cadre .demo-preview livré avec le code : la scène elle-même est transparente.
Au survol, tout change en même temps en 0,4 s (transition: .4s cubic-bezier(.4, 0, .2, 1), appliquée à toutes les propriétés) : marges 14px 36px → 16px 52px, coins 14 → 20 px, fond à 12 %, bordure violette à 40 %, ombre violette 0 8px 32px doublée d'un halo intérieur inset 0 0 20px, et scale(1.05). Mesuré dans Chromium : 161 × 46 px au repos, 193 × 50 px de boîte au survol, soit 203 × 53 px à l'écran avec le zoom ; dans Firefox, 157 × 48 → 189 × 52 px de boîte, 198 × 55 px à l'écran (le libellé y est rendu un peu plus étroit). Au clic, :active repasse à scale(.98). Comme ce sont les marges qui grandissent, le bouton prend réellement de la place : centré, il s'étire des deux côtés ; aligné à gauche, il s'allonge vers la droite et pousse ce qui le suit sur la ligne.
Le flou est déclaré deux fois, backdrop-filter: blur(20px) et -webkit-backdrop-filter: blur(20px), et ce n'est pas une redite : Safari avant la version 18 (iOS 17 et antérieurs compris) ne lit que la forme préfixée, et sans elle il afficherait un bouton simplement translucide, sans dépoli. Pour le reste, le bouton ne dépend de rien : aucun JavaScript, aucune dépendance, aucune variable du site.
Accessibilité
- Clavier : c'est un
<button>, il reçoit le focus avec Tab et s'active avec Entrée ou Espace. En revanche l'étirement n'existe qu'au survol : au clavier, le bouton reste à sa taille de repos avec l'anneau de focus par défaut du navigateur. Ajoutez.glass-morph-btn:focus-visibleà la règle:hoverpour que le focus produise la même forme, et gardez un contour visible (outline: 2px solid #a78bfa; outline-offset: 3px). - Toucher : sur mobile, il n'y a pas de survol avant le doigt. Au premier appui, la plupart des navigateurs mobiles appliquent
:hoveret le laissent en place après le relâchement, si bien que le bouton reste étiré jusqu'à ce qu'on touche ailleurs. Pour limiter l'étirement aux appareils à pointeur, enveloppez la règle dans@media (hover: hover) { … }. - prefers-reduced-motion absent du code : les halos continuent de flotter et la transition de 0,4 s reste active sous l'émulation. L'étirement est provoqué par l'utilisateur et bref ; ajoutez
@media (prefers-reduced-motion: reduce) { .glass-morph-btn { transition: none } .glass-btn-bg-1, .glass-btn-bg-2 { animation: none } }pour un changement d'état sans mouvement. - Contraste : libellé blanc mesuré entre 6,5:1 et 10:1 sur le bouton selon le halo qui passe derrière. Sur une photo claire, le blanc à 8 % ne suffit plus : la scène de l'annonce immobilière passe le fond du bouton en brun foncé à 22 %. Le libellé est en capitales par CSS (
text-transform) : écrivez-le normalement dans le HTML, les lecteurs d'écran le liront comme un mot et non lettre par lettre.
Compatibilité navigateur
CSS seul : backdrop-filter et -webkit-backdrop-filter, filter: blur(), transition sur padding, border-radius, box-shadow (dont inset) et transform, @keyframes. Zéro JavaScript, zéro dépendance. Flou d'arrière-plan : Chrome 76+, Edge 79+, Firefox 103+, Safari 9+ avec le préfixe (déclaré dans le code), sans préfixe depuis Safari 18. Mesuré dans Chromium 151 et Firefox 153 : mêmes valeurs calculées au repos et au survol (marges, coins, bordure violette, scale(1.05)). Firefox et WebKit 26.5 sous Playwright reconnaissent le flou (blur(20px) calculé) mais leurs captures automatisées ne le peignent pas, même sur un test minimal : le dépoli n'a été vu que dans Chromium.
Sans flou d'arrière-plan, le bouton reste un voile blanc à 8 % sur les halos, et l'étirement fonctionne à l'identique : les transitions sur padding, border-radius et box-shadow existent dans tous les navigateurs actuels. Sur une photo nette, prévoyez un fond plus opaque dans @supports not (backdrop-filter: blur(1px)).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="glass-btn-scene">
<div class="glass-btn-bg-1"></div>
<div class="glass-btn-bg-2"></div>
<button class="glass-morph-btn">…</button>
</div>
</div>Le code complet HTML + CSS + JS de Glass Morphing Button, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Étirement (CSS — padding: 14px 36px → :hover { padding: 16px 52px }) |
+16 px de chaque côté, +2 px en hauteur | C'est l'écart entre les deux marges qui fait le « morphing ». 16px 64px pour un étirement plus marqué ; gardez la même hauteur (14 → 14 px) pour un bouton qui ne s'allonge qu'en largeur. Ce changement de marge déplace les éléments voisins : centrez le bouton ou réservez-lui une largeur fixe s'il est dans une ligne. |
Forme des coins (CSS — border-radius: 14px → 20px) |
14 px puis 20 px | 999px au survol donne une pilule ; l'inverse (20 → 8 px) donne un bouton qui se durcit sous la main. La transition interpole les deux valeurs en 0,4 s. |
Couleur de l'état survolé (CSS — border-color, box-shadow en rgba(139,92,246,…)) |
violet à 40 % (bordure), 30 % (ombre), 10 % (halo intérieur) | Remplacez les trois occurrences de 139, 92, 246 par la couleur de votre marque. Le halo intérieur (inset 0 0 20px) est ce qui donne l'impression que le verre s'allume ; supprimez-le pour un survol plus sobre. |
Zoom (CSS — transform: scale(1.05) au survol, scale(.98) au clic) |
+5 % puis −2 % | Le zoom s'ajoute à l'étirement des marges : à 1.05, le bouton de 193 px en paraît 203. Mettez scale(1) pour que seul l'étirement joue, sans flou de texte pendant l'agrandissement. |
Verre (CSS — background: rgba(255,255,255,.08), backdrop-filter: blur(20px)) |
blanc à 8 %, flou de 20 px | Sur une photo ou une vidéo claire, passez à une teinte foncée (rgba(30,25,20,.22)) ; sur une vidéo très chargée, montez le flou à 28 px pour que le libellé ne vibre pas sur les détails. |
Halos derrière le bouton (CSS — .glass-btn-bg-1, .glass-btn-bg-2, glassBtnOrb 5s) |
violet 100 px et cyan 80 px, flou 40 px, 5 s | Sur un fond déjà coloré, gardez-les pour teinter le verre aux couleurs de la marque ou supprimez-les. Le fond sombre vient de .demo-preview : si vous l'enlevez, donnez un fond à .glass-btn-scene ou posez-la sur votre image. |
FAQ
padding 36 → 52 px de chaque côté) : la boîte du bouton grandit réellement, de 161 à 193 px de large (mesuré dans Chromium). Dans une ligne de texte ou une rangée de boutons, ses voisins se décalent de 32 px. C'est voulu ici — c'est ce qui fait que le libellé reste immobile au centre pendant que le verre s'étend — mais cela veut aussi dire un recalcul de mise en page à chaque image de la transition. Deux parades : centrer le bouton dans un conteneur un peu plus large (comme dans la scène de la croisière), ou lui donner une largeur fixe et n'animer que transform: scaleX() sur un pseudo-élément de fond.<button> — mais l'étirement est lié au survol. Au doigt, sur la plupart des navigateurs mobiles, le premier appui déclenche à la fois le clic et :hover, qui reste appliqué après le relâchement : le bouton reste étiré. Au clavier, rien ne s'étire, seul l'anneau de focus apparaît. Ajoutez :focus-visible à la règle du survol et enveloppez celle-ci dans @media (hover: hover) pour un comportement net sur les trois.#0a0a0f sur lequel les halos et le verre se lisent ; la scène .glass-btn-scene, elle, est transparente. Si vous posez le bouton sur votre propre image ou vidéo, vous pouvez retirer ce cadre : le verre floutera votre image. Si vous le posez sur une page blanche sans rien derrière, gardez-le ou donnez un fond à la scène, sinon le libellé blanc disparaît.
