Éditeur de bouton, tiroir & modal glass

Cet éditeur vous permet de créer facilement un bouton glass interactif lié à un tiroir ou une modal entièrement personnalisable, avec aperçu en direct.

État : prêt

Réglages

Menu rapide

Choisissez une base prête à l’emploi puis ajustez chaque détail dans les autres accordéons.

Messagerie glass Bouton rond, tiroir centré, ambiance douce et moderne.

Support client Position basse, icône casque, appel à l’action plus visible.

Notifications Style plus compact, accent lumineux, contenu orienté alertes.

Profil rapide Tiroir plus doux, icône utilisateur, cartes orientées profil.

Le menu rapide au-dessus ouvre directement la zone souhaitée.

Libellé ARIA du bouton

Icône

Forme principale

Rayon personnalisé

28 px

Largeur

72 px

Hauteur

72 px

Taille de l’icône

30 px

Flou glass

14 px

Côté du bouton

Alignement vertical

Décalage horizontal

24 px

Décalage vertical

24 px

Fond du bouton

12 %

Couleur de bordure

28 %

Couleur de l’icône

95 %

Couleur de l’ombre

30 %

Type de composant Le mode modal réutilise le même design glass, mais se centre à l’écran.

Position de la modal Ce réglage est utilisé seulement quand le type choisi est Modal.

Côté du tiroir Utilisé seulement par le mode tiroir.

Alignement vertical du tiroir Le mode tiroir peut être centré, collé en haut ou en bas.

Largeur

380 px

Hauteur minimale

420 px

Padding interne

24 px

Arrondi principal

28 px

Flou glass

18 px

Flou overlay

2 px

Couleur overlay

45 %

Dégradé glass - couleur 1

17 %

Dégradé glass - couleur 2

8 %

Bordure du tiroir

24 %

Couleur d’accent

26 %

Couleur du texte

100 %

Titre

Symbole fermeture

Texte principal

Bloc 1 - titre

Bloc 1 - texte

Bloc 2 - titre

Bloc 2 - texte

Bloc 3 - titre

Bloc 3 - texte

Bouton d’action 1

Bouton d’action 2

Durée d’animation

420 ms

Fond de la démo

Fermer au clic sur l’overlay

Fermer avec la touche Échap

Afficher les blocs d’information

Afficher les boutons d’action

L’aperçu interne et l’export utilisent exactement les mêmes réglages, en mode tiroir comme en mode modal.

Le code embed est pensé pour être collé dans une page existante. Le HTML complet sert de démo autonome pour un tiroir ou une modal, ou de base à modifier.

Aperçu de construction