Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
AtmosphèreGratuit

Success/Error Tone

Paire de boutons CSS vert/rouge avec animation de pression et double encodage emoji + couleur — IDs prêts à câbler sur l'API Web Audio, zéro dépendance.

Web AudioFeedbackUX
Survolez ou cliquez la scène pour interagir

Cet effet est gratuit — la catégorie Atmosphère en contient 57 au total, dont 10 gratuits. Effect.Labs regroupe 811 effets vanilla. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit

Exemples d'usage

Gratuit pour toujours

Créez votre compte

Rejoignez 12 400 développeurs

Résultat de validation

① Hero / Landing — Validation de formulaire d'inscription

QuandL'utilisateur soumet ses coordonnées (email, mot de passe). Le back-end répond : adresse valide (succès) ou email déjà existant (erreur).
PourquoiUn retour coloré immédiat remplace une modale bloquante — le bouton vert ou rouge dans le flux du formulaire réduit l'anxiété d'attente et oriente l'utilisateur sans interrompre la saisie.
RéglagesCâbler #sndSuccess sur accord majeur (sol 392 Hz + si 494 Hz + ré 587 Hz, durée 0,5 s, gain 0,12) et #sndError sur accord mineur (ré 294 Hz + fa 349 Hz, durée 0,3 s, gain 0,10). gap: 12px sur .snd-tones pour compacter sous le champ email.
État des services Disponibilité 99,98 % — 30 jours
En direct
Stripe API
Supabase DB
Webhook relay
Tester la connexion

② Composant produit — Panneau de santé API / connexion service

QuandDashboard de monitoring : une connexion à un service externe (Stripe, Supabase, webhook) réussit ou échoue en temps réel.
PourquoiLa paire de boutons réduite (<code>padding: 8px 16px; font-size: 0.75rem</code>) s'intègre dans une row de statuts. Elle peut être déclenchée programmatiquement via <code>document.getElementById('sndSuccess').click()</code> sur réception du webhook.
Réglagespadding: 8px 16px, font-size: 0.75rem, gap: 8px sur .snd-tones. Durée sonore réduite à 0,25 s pour ne pas perturber un tableau de bord en monitoring continu.
Théorie musicale Question 1 / 3

Cet accord est-il majeur ou mineur ?

Sol — Si — Ré
G   B   D

③ Quiz musical — Accord majeur pour la bonne réponse, mineur pour l'erreur

QuandL'utilisateur répond à une question de théorie musicale (identifier la nature d'un accord). La paire de boutons confirme la bonne réponse avec l'accord majeur lumineux (✅) et signale l'erreur avec l'accord mineur sombre (❌).
PourquoiLes deux accords sont le retour sensoriel naturel du quiz : le son joyeux ancre la bonne réponse dans la mémoire, le son sombre signale l'erreur sans décourager. L'animation <code>scale(0.95)</code> rend chaque réponse physiquement satisfaisante. Les IDs <code>#sndSuccess</code> / <code>#sndError</code> câblent la synthèse en deux lignes.
RéglagesRelabelliser les boutons selon le contexte (✅ Majeur / ❌ Mineur). Câbler #sndSuccess sur la bonne réponse, #sndError sur la mauvaise. gap: 12px sur .snd-tones, padding: 10px 22px pour un format carte. Désactiver les deux boutons après le premier clic (btn.disabled = true) pour éviter les doubles réponses.

Comment ça marche

Le composant est CSS pur : deux éléments <button> natifs portant les classes .snd-tone-success et .snd-tone-error. Chaque bouton applique une couleur sémantique en triple usage — texte, fond semi-transparent (rgba(…, 0.20)) et bordure (rgba(…, 0.30)) — avec emerald-500 (#10b981) pour le succès et red-500 (#ef4444) pour l'erreur. Ce style « ghost » laisse l'arrière-plan transparaître tout en signalant clairement l'état.

Le retour tactile est assuré par :active { transform: scale(0.95) } combiné à transition: transform 0.2s sur .snd-tone-btn — le bouton s'enfonce visuellement à l'appui sans aucun JavaScript. La mise en page interne du bouton utilise display:flex; gap:6px; align-items:center pour aligner horizontalement l'emoji (✅ ou ❌) et le libellé.

Les identifiants id="sndSuccess" et id="sndError" servent de points d'ancrage d'intégration : le projet câble la synthèse sonore dans l'onclick de chaque bouton via l'API Web Audio native — AudioContext, createOscillator() (type sine) et createGain() pour l'enveloppe. Accord majeur (sol-si-ré 392/494/587 Hz) pour le succès, accord mineur (ré-fa-la 294/349/440 Hz) pour l'erreur. La synthèse n'est pas embarquée dans le code source.

Le conteneur .snd-tones positionne les deux boutons en display:flex; gap:16px. Aucun canvas, aucun requestAnimationFrame, aucun observateur — le rendu est entièrement géré par le moteur CSS du navigateur, sans coût d'initialisation.

Accessibilité

  • Éléments <button> natifs : focusables au clavier (Tab + Entrée ou Espace) sans ARIA ni JavaScript supplémentaires.
  • Double encodage couleur + emoji (✅ ❌) : le sens succès / erreur n'est pas véhiculé par la couleur seule — conforme WCAG 1.4.1 (usage de la couleur).
  • prefers-reduced-motion absent du code source : la transition: transform 0.2s sur :active n'est pas désactivée. Ajoutez dans votre CSS : @media (prefers-reduced-motion: reduce) { .snd-tone-btn { transition: none; } .snd-tone-btn:active { transform: none; } }.
  • Contraste texte : emerald-500 (#10b981) sur fond sombre atteint ≈ 5,6:1 ; red-500 (#ef4444) ≈ 5,3:1 — tous deux au-dessus du seuil WCAG AA (4,5:1).
  • Si vous ajoutez une synthèse audio, prévoyez un retour texte visible (libellé bouton, toast) pour les utilisateurs en contexte muet ou avec haut-parleurs désactivés.

Compatibilité navigateur

Composant CSS pur — aucune API JavaScript requise pour la partie visuelle. L'API Web Audio (synthèse audio optionnelle) est supportée dans tous les navigateurs modernes.

Chrome 88+✓ Complet
Firefox 87+✓ Complet
Safari 14+✓ Complet
Edge 88+✓ Complet
Mobile iOS✓ Touch OK
Android Chrome✓ Complet

Sans CSS, les deux <code>&lt;button&gt;</code> s'affichent avec les styles natifs du navigateur et restent cliquables — aucune erreur JS, aucune dépendance cassée.

Le code

Copiez les trois blocs dans votre page. Aucune dépendance.

HTML 
<div class="snd-tones">
  <button class="snd-tone-btn snd-tone-success" id="sndSuccess">✅ Succes</button>
  <button class="snd-tone-btn snd-tone-error" id="sndError">❌ Erreur</button>
</div>
CSS 
.snd-tones  {
   display: flex;
   gap: 16px;
   }

.snd-tone-btn  {
   padding: 12px 24px;
   border-radius: 8px;
   border-width: medium;
   border-style: none;
   border-color: currentcolor;
   border-image: initial;
   cursor: pointer;
   font-size: 0.85rem;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 6px;
   transition: transform 0.2s;
   }

.snd-tone-btn:active  {
   transform: scale(0.95);
   }

.snd-tone-success  {
   background: rgba(16, 185, 129, 0.2);
   color: rgb(16, 185, 129);
   border: 1px solid rgba(16, 185, 129, 0.3);
   }

.snd-tone-error  {
   background: rgba(239, 68, 68, 0.2);
   color: rgb(239, 68, 68);
   border: 1px solid rgba(239, 68, 68, 0.3);
   }
JavaScript (fx-0533) 
// Effet CSS pur — pas de JavaScript nécessaire

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriétéDéfautEffet
rgba(16, 185, 129, …) — CSS .snd-tone-success emerald-500 Couleur du bouton succès (texte, fond ×0,20, bordure ×0,30). Remplacer par la couleur positive de votre brand — ex. indigo : rgba(99, 102, 241, 0.2).
rgba(239, 68, 68, …) — CSS .snd-tone-error red-500 Couleur du bouton erreur. Passer à ambre si votre charte évite le rouge vif : rgba(245, 158, 11, 0.2).
border-radius: 8px 8px Arrondi des boutons. 4px = look strict, 100px = style pill compact.
padding: 12px 24px 12px 24px Taille interne. Réduire à 6px 14px pour une intégration compacte dans une toolbar ou une row de statuts.
font-size: 0.85rem 0.85rem Taille du libellé. 1rem pour un CTA principal, 0.72rem pour une row dense.
transition: transform 0.2s 0.2s Durée de l'animation de pression. 0.1s = snap immédiat, 0.35s ease-out = rebond plus doux.
gap: 16px — sur .snd-tones 16px Espacement entre les deux boutons. 8px pour une barre étroite, 24px pour une mise en scène aérée.

FAQ

Le code inclut-il une vraie synthèse audio ?

Non. Le fichier source est CSS pur — deux boutons visuels sans son embarqué. La synthèse est à ajouter côté projet via new AudioContext() : créez un OscillatorNode (type: 'sine'), un GainNode pour l'enveloppe ADSR, branchez-les sur ctx.destination, et déclenchez-les dans l'onclick de #sndSuccess et #sndError. Les IDs sont prévus pour cet usage.

Peut-on utiliser un seul bouton qui bascule entre succès et erreur selon l'état ?

Oui : supprimez l'une des classes et basculez l'autre via btn.classList.replace('snd-tone-success', 'snd-tone-error'). Le bouton change instantanément de couleur (texte, fond, bordure). Combinez avec une mise à jour du textContent et de l'emoji pour un retour complet sans créer deux éléments séparés.

L'animation :active est-elle désactivée pour prefers-reduced-motion ?

Pas dans le code source. Ajoutez ce bloc dans votre CSS global : @media (prefers-reduced-motion: reduce) { .snd-tone-btn { transition: none; } .snd-tone-btn:active { transform: none; } } — trois lignes suffisent sans modifier le code de l'effet.