Free forever
Create your account
Join 12,400 developers already on board
Validation result
AtmosphereFree
Success/Error Tone
Pure-CSS success/error button pair with press animation and dual emoji + color encoding — IDs ready to wire to the Web Audio API, zero dependency.
Hover or click the scene to interact
This effect is free — the Atmosphere category contains 57 effects total, including 10 free. Effect.Labs has 811 vanilla effects. Explore the category →
Usage examples
Service health
Uptime 99.98% — last 30 days
Live
Stripe API
Supabase DB
Webhook relay
Music theory
Question 1 / 3
Is this chord major or minor?majeur ou mineur ?
Sol
—
Si
—
Ré
G B D
How it works
The component is pure CSS: two native <button> elements with classes .snd-tone-success and .snd-tone-error. Each button applies a semantic color in triple use — text, semi-transparent background (rgba(…, 0.20)) and border (rgba(…, 0.30)) — using emerald-500 (#10b981) for success and red-500 (#ef4444) for error. The ghost style lets the background show through while clearly signaling state.
Tactile feedback is provided by :active { transform: scale(0.95) } combined with transition: transform 0.2s on .snd-tone-btn — the button sinks visually on press without any JavaScript. The button's internal layout uses display:flex; gap:6px; align-items:center to align the emoji (✅ or ❌) and the label horizontally.
The identifiers id="sndSuccess" and id="sndError" serve as integration anchor points: the project wires audio synthesis in the onclick of each button via the native Web Audio API — AudioContext, createOscillator() (type sine) and createGain() for the envelope. Major chord (G-B-D 392/494/587 Hz) for success, minor chord (D-F-A 294/349/440 Hz) for error. The synthesis is not embedded in the source code.
The .snd-tones container positions both buttons with display:flex; gap:16px. No canvas, no requestAnimationFrame, no observer — rendering is handled entirely by the browser's CSS engine with zero initialization cost.
Accessibility
- Native
<button>elements: keyboard-focusable (Tab + Enter or Space) without extra ARIA or JavaScript. - Dual color + emoji encoding (✅ ❌): success / error meaning is not conveyed by color alone — WCAG 1.4.1 compliant.
- prefers-reduced-motion not handled in source code: the
transition: transform 0.2son:activeis not suppressed. Add to your CSS:@media (prefers-reduced-motion: reduce) { .snd-tone-btn { transition: none; } .snd-tone-btn:active { transform: none; } }. - Text contrast: emerald-500 (
#10b981) on a dark background reaches ≈ 5.6:1; red-500 (#ef4444) ≈ 5.3:1 — both above the WCAG AA threshold (4.5:1). - If you add audio synthesis, provide a visible text fallback (button label, toast) for users in silent contexts or with speakers disabled.
Browser compatibility
Pure CSS component — no JavaScript API required for the visual part. The Web Audio API (optional audio synthesis) is supported in all modern browsers.
Chrome 88+✓ Full
Firefox 87+✓ Full
Safari 14+✓ Full
Edge 88+✓ Full
Mobile iOS✓ Touch OK
Android Chrome✓ Full
Without CSS, the two <code><button></code> elements display with the browser's native styles and remain clickable — no JS errors, no broken dependencies.
The code
Copy the three blocks into your page. No dependencies.
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écessaireCustomize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| rgba(16, 185, 129, …) — CSS .snd-tone-success | emerald-500 | Success button color (text, background ×0.20, border ×0.30). Replace with your positive brand color — e.g. indigo: rgba(99, 102, 241, 0.2). |
| rgba(239, 68, 68, …) — CSS .snd-tone-error | red-500 | Error button color. Switch to amber if your brand avoids bright red: rgba(245, 158, 11, 0.2). |
| border-radius: 8px | 8px | Button corner radius. 4px = strict look, 100px = compact pill style. |
| padding: 12px 24px | 12px 24px | Inner button size. Reduce to 6px 14px for compact use in a toolbar or status row. |
| font-size: 0.85rem | 0.85rem | Label size. 1rem for a primary CTA, 0.72rem for a dense row. |
| transition: transform 0.2s | 0.2s | Press animation duration. 0.1s = instant snap, 0.35s ease-out = softer bounce. |
| gap: 16px — on .snd-tones | 16px | Space between the two buttons. 8px in a narrow bar, 24px for a more open layout. |
FAQ
Does the code include real audio synthesis?
No. The source file is pure CSS — two visual buttons with no embedded sound. Synthesis is to be added on the project side via new AudioContext(): create an OscillatorNode (type: 'sine'), a GainNode for the ADSR envelope, connect them to ctx.destination, and trigger them in the onclick of #sndSuccess and #sndError. The IDs are designed for this purpose.
Can I use a single button that toggles between success and error based on state?
Yes: remove one class and swap the other based on state: btn.classList.replace('snd-tone-success', 'snd-tone-error'). The button changes color (text, background, border) instantly. Combine with a textContent and emoji update for a complete response without creating two separate elements.
Is the :active transition suppressed for prefers-reduced-motion?
Not in the source code. Add this block to your global CSS: @media (prefers-reduced-motion: reduce) { .snd-tone-btn { transition: none; } .snd-tone-btn:active { transform: none; } } — three lines cover the case without modifying the effect code.
