New
Ship your product,<br>not your bugs.
Ship your product,<br>not your bugs.
pas vos bugs.
Join 2,400 teams who build faster with Effect.
AtmosphereFree
Click Sound Button
Pure CSS button with visual click feedback — indigo-violet gradient, 0.95× press scale on :active, hover glow, and a 🔊 icon that pulses via the .clicked class.
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
Popular
Pro
29 € / month
- Unlimited effects
- Priority support
- Custom branding
Get the weekly digest
100+ curated CSS effects every Friday, free.
✅ You're in! Check your inbox.
No spam. Unsubscribe anytime.
How it works
The effect relies entirely on CSS transitions without a single line of JavaScript in the provided code. Two properties drive the visual mechanics: transform: scale(0.95) on :active simulates a physical button press in 0.15 s, and box-shadow adds a semi-transparent indigo halo (rgba, 40% opacity, 20 px blur) on hover, carried by the same 0.15 s transition.
The .snd-wave icon (🔊) has its own 0.2 s transition. It grows to scale(1.3) when the .clicked class is added to the button — a mechanism designed to be triggered by a small JS listener in your project (btn.classList.add('clicked') then removed after 250 ms). The provided code does not include this listener: two lines to write in your framework.
The background is a linear-gradient(135°) from rgb(99,102,241) (indigo-500) to rgb(168,85,247) (violet-500) applied directly to the <button>. The button uses display:flex with gap:8px to align icon and text without manual margin math. border-style:none removes the native button border.
Accessibility
- prefers-reduced-motion: absent from the code — CSS transitions (
transform,box-shadow) apply even when the user has requested reduced motion. Fix: add@media (prefers-reduced-motion: reduce) { .snd-click-btn, .snd-click-btn .snd-wave { transition: none; } }. - The element is a native
<button>— keyboard-focusable by default, activatable via Enter and Space. No manualtabindexneeded. - No
:focus-visiblestyle is defined in the provided CSS: the browser's native outline applies. For WCAG 2.4.11 (Focus Appearance), add.snd-click-btn:focus-visible { outline: 2px solid #818cf8; outline-offset: 3px; }. - White text on the indigo-violet gradient achieves a contrast ratio ≥ 4.5:1 (WCAG AA) with the default colors.
- The 🔊 icon is purely decorative — the button text carries the meaning. In production, replace the generic label with text describing the actual action.
Browser compatibility
Requires CSS Transitions and CSS Gradients — supported in all modern browsers since 2013. Zero external dependencies.
Chrome 88+✓ Full
Firefox 87+✓ Full
Safari 15+✓ Full
Edge 88+✓ Full
Mobile iOS✓ Full
Android Chrome✓ Full
Without CSS Transitions support, the button displays correctly (gradient, color, padding) but without animation — 100% functional, just static.
The code
Copy the three blocks into your page. No dependencies.
HTML
<button class="snd-click-btn" id="sndClickBtn">
<span class="snd-wave">🔊</span> Click Me
</button>
CSS
.snd-click-btn {
padding: 14px 28px;
border-width: medium;
border-style: none;
border-color: currentcolor;
border-image: initial;
border-radius: 10px;
background: linear-gradient(135deg, rgb(99, 102, 241), rgb(168, 85, 247));
color: rgb(255, 255, 255);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
display: flex;
align-items: center;
gap: 8px;
}
.snd-click-btn:active {
transform: scale(0.95);
}
.snd-click-btn:hover {
box-shadow: rgba(99, 102, 241, 0.4) 0px 4px 20px;
}
.snd-click-btn .snd-wave {
display: inline-block;
transition: transform 0.2s;
}
.snd-click-btn.clicked .snd-wave {
transform: scale(1.3);
}
JavaScript (fx-0525)
// Effet CSS pur — pas de JavaScript nécessaireCustomize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| background (CSS) | linear-gradient(135deg, rgb(99,102,241), rgb(168,85,247)) | Gradient colors — swap the two rgb() values for your brand colors. Also accepts hex or a flat color. |
| border-radius (CSS) | 10px | Corner rounding. 0 = hard rectangle, 100px = pill button. |
| padding (CSS) | 14px 28px | Button size. Increase for a hero CTA (16px 40px) or decrease for inline use (8px 18px). |
| scale in :active (CSS) | 0.95 | Simulated press depth. 0.93 = pronounced press, 0.98 = gentle touch. Edit in the .snd-click-btn:active { transform: scale(...) } rule. |
| box-shadow in :hover (CSS) | rgba(99,102,241,0.4) 0px 4px 20px | Hover halo color and intensity. Change the rgba() to match your gradient color. |
| transition (CSS) | transform 0.15s, box-shadow 0.15s | Animation duration. 0.10 s = snappy, 0.25 s = smoother. Edit both values in the transition property. |
| .snd-wave content (HTML) | 🔊 | Icon in the .snd-wave span — replace the emoji with an inline SVG. The scale(1.3) animation still applies. |
| scale in .clicked .snd-wave (CSS) | 1.3 | Icon pulse amplitude when .clicked is added. 1.5 = pronounced flash, 1.15 = subtle. |
FAQ
Does the button actually make a sound?
No — despite the name, the provided code is entirely CSS with no Web Audio API. It produces visual feedback only (scale on :active + hover glow + 🔊 icon pulse via .clicked). To add real sound: create an AudioContext, generate a short beep (oscillator.type = 'sine', 80 ms duration, 880 Hz) and fire it in the click listener alongside classList.add('clicked').
How do I activate the .clicked class?
The CSS defines .snd-click-btn.clicked .snd-wave { transform: scale(1.3) } but the included code does not add it. Add this listener: btn.addEventListener('click', () => { btn.classList.add('clicked'); setTimeout(() => btn.classList.remove('clicked'), 250); }). Replace 250 with your desired transition duration.
Can I use this button in React or Vue without conflicts?
Yes. Copy the CSS into your stylesheet (or CSS module). In React, replace direct classList manipulation with state: const [clicked, setClicked] = useState(false), pass className={clicked ? 'snd-click-btn clicked' : 'snd-click-btn'}, and trigger setClicked(true) then false after 250 ms in the onClick handler.
