AtmosphèreGratuit

Click Sound Button

Bouton CSS pur avec feedback visuel au clic — dégradé indigo-violet, compression :active à 0,95×, halo hover, et icône 🔊 qui pulse via la classe .clicked.

Web AudioBoutonFeedback

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

Nouveau

Livrez votre produit,
pas vos bugs.

Rejoignez 2 400 équipes qui livrent plus vite avec Effect.

① Hero / Landing — CTA principal d'inscription

QuandLe bouton d'action principale d'une landing page (SaaS, app, newsletter) visible above the fold, où chaque milliseconde de feedback compte.

PourquoiLa compression 0,95× au clic rassure l'utilisateur que son action a été enregistrée avant même le retour serveur — réduit le double-clic accidentel et l'anxiété de conversion.

RéglagesGardez le dégradé par défaut, passez à padding: 16px 40px; font-size: 1.1rem pour la taille hero. Déclenchez classList.add('clicked') immédiatement au clic, retirez après 250 ms.

Populaire

Pro

29 € / mois

Effets illimités
Support prioritaire
Branding personnalisé

② Composant produit — Bouton dans une carte pricing

QuandBouton « Choisir ce plan » ou « Ajouter au panier » dans une carte tarifaire ou une fiche produit — contexte où le bouton est entouré d'informations denses.

PourquoiLe halo hover (box-shadow indigo 20 px) attire l'œil vers l'action principale sans modifier la mise en page ; la compression :active offre un retour sans notification visible.

RéglagesRéduisez à padding: 12px 24px, adaptez les deux rgb() du dégradé à votre couleur brand. L'animation :active fonctionne telle quelle sans JS.

📬

Recevez la sélection hebdo

100+ effets CSS sélectionnés chaque vendredi, gratuit.

✅ C'est fait ! Vérifiez votre boîte mail.

Pas de spam. Désabonnement en 1 clic.

③ Micro-interaction de conversion — Validation de formulaire

QuandBouton « Envoyer », « Valider » ou « S'abonner » au bas d'un formulaire — là où le feedback immédiat évite une double soumission.

PourquoiLa compression + le pulse 1,3× de l'icône 🔊 donnent un retour sensoriel avant que la requête AJAX ne réponde — réduit la latence perçue sans spinner supplémentaire.

RéglagesPassez le dégradé en vert (rgb(16,185,129) → rgb(5,150,105)) pour le signal « Go ». Ajoutez .clicked au submit, retirez-la à la résolution de la promesse (ou après 400 ms de délai max).

Comment ça marche

L'effet repose entièrement sur les transitions CSS sans une seule ligne de JavaScript dans le code fourni. Deux propriétés animent la mécanique visuelle : transform: scale(0.95) sur :active simule l'enfoncement physique du bouton en 0,15 s, et box-shadow ajoute un halo semi-transparent indigo (rgba, 40 % opacité, rayon 20 px) au survol, porté par la même transition 0,15 s.

L'icône .snd-wave (🔊) possède sa propre transition de 0,2 s. Elle grossit à scale(1,3) quand la classe .clicked est posée sur le bouton — mécanisme prévu pour être déclenché par un listener JS côté projet (btn.classList.add('clicked') puis retrait après 250 ms). Le code fourni ne contient pas ce listener : c'est deux lignes à écrire selon votre framework.

Le fond est un linear-gradient(135°) de rgb(99,102,241) (indigo-500) à rgb(168,85,247) (violet-500) posé directement sur le <button>. Le bouton est en display:flex avec gap:8px pour aligner icône et texte sans calcul de marges. border-style:none supprime la bordure native.

Accessibilité

prefers-reduced-motion : absent du code — les transitions CSS (transform, box-shadow) s'appliquent même si l'utilisateur a demandé à réduire le mouvement. Correctif : ajoutez @media (prefers-reduced-motion: reduce) { .snd-click-btn, .snd-click-btn .snd-wave { transition: none; } }.
L'élément est un <button> HTML natif — focusable au clavier par défaut, activable via Entrée et Espace. Aucun tabindex manuel n'est nécessaire.
Pas de :focus-visible défini dans le CSS fourni : l'outline natif du navigateur s'applique. Pour WCAG 2.4.11, ajoutez .snd-click-btn:focus-visible { outline: 2px solid #818cf8; outline-offset: 3px; }.
Le texte blanc sur le dégradé indigo-violet atteint un ratio de contraste ≥ 4,5:1 (WCAG AA) avec les couleurs par défaut.
L'icône 🔊 est purement décorative — le texte du bouton porte le sens. En production, remplacez le texte générique par un libellé décrivant l'action réelle.

Compatibilité navigateur

Nécessite CSS Transitions et CSS Gradients — supportés dans tous les navigateurs modernes depuis 2013. Aucune dépendance externe.

Chrome 88+✓ Complet

Firefox 87+✓ Complet

Safari 15+✓ Complet

Edge 88+✓ Complet

Mobile iOS✓ Complet

Android Chrome✓ Complet

Sans support CSS Transitions, le bouton s'affiche correctement (dégradé, couleur, padding) mais sans animation — 100 % fonctionnel, juste statique.

Le code

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

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écessaire

Personnaliser

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

Option / propriété	Défaut	Effet
background (CSS)	linear-gradient(135deg, rgb(99,102,241), rgb(168,85,247))	Couleurs du dégradé — remplacez les deux valeurs rgb() par vos couleurs brand. Fonctionne aussi avec un hex ou une couleur plate.
border-radius (CSS)	10px	Arrondi des coins. 0 = rectangle strict, 100px = bouton pilule.
padding (CSS)	14px 28px	Taille du bouton. Augmentez pour un CTA hero (16px 40px) ou réduisez pour un bouton inline (8px 18px).
scale dans :active (CSS)	0.95	Profondeur d'enfoncement simulé. 0,93 = pression marquée, 0,98 = toucher léger. Modifiez dans la règle `.snd-click-btn:active { transform: scale(...) }`.
box-shadow dans :hover (CSS)	rgba(99,102,241,0.4) 0px 4px 20px	Couleur et intensité du halo hover. Changez le rgba() pour correspondre à votre couleur de dégradé.
transition (CSS)	transform 0.15s, box-shadow 0.15s	Durée des animations. 0,10 s = réactif, 0,25 s = plus doux. Modifiez les deux durées dans la propriété `transition` du bouton.
.snd-wave content (HTML)	🔊	Icône dans le span .snd-wave — remplacez l'emoji par une icône SVG inline. L'animation scale(1,3) s'appliquera de toute façon.
scale dans .clicked .snd-wave (CSS)	1.3	Amplitude du pulse de l'icône quand la classe .clicked est posée. 1,5 = flash prononcé, 1,15 = discret.

FAQ

Le bouton génère-t-il vraiment un son ?

Non — malgré son nom, le code fourni est entièrement CSS sans Web Audio API. Il produit un feedback visuel uniquement (compression :active + halo hover + pulse de l'icône 🔊 via .clicked). Pour ajouter un vrai son : créez un AudioContext, générez un bip court (oscillator.type = 'sine', durée 80 ms, fréquence 880 Hz) et déclenchez-le dans le listener de clic, en parallèle de classList.add('clicked').

Comment activer la classe .clicked ?

Le CSS prévoit la règle .snd-click-btn.clicked .snd-wave { transform: scale(1.3) } mais le code inclus ne la pose pas. Ajoutez ce listener : btn.addEventListener('click', () => { btn.classList.add('clicked'); setTimeout(() => btn.classList.remove('clicked'), 250); }). Remplacez 250 par la durée de transition souhaitée.

Puis-je l'utiliser dans React ou Vue sans conflit ?

Oui. Copiez le CSS dans votre fichier de styles (ou module CSS). Dans React, remplacez la manipulation de classList par de l'état : const [clicked, setClicked] = useState(false), passez className={clicked ? 'snd-click-btn clicked' : 'snd-click-btn'} et déclenchez setClicked(true) puis false après 250 ms dans le onClick.

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus

Click Sound Button

Exemples d'usage

Livrez votre produit,
pas vos bugs.

① Hero / Landing — CTA principal d'inscription

② Composant produit — Bouton dans une carte pricing

Recevez la sélection hebdo

③ Micro-interaction de conversion — Validation de formulaire

Comment ça marche

Accessibilité

Compatibilité navigateur

Le code

Personnaliser

FAQ

Le bouton génère-t-il vraiment un son ?

Comment activer la classe .clicked ?

Puis-je l'utiliser dans React ou Vue sans conflit ?

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus

Click Sound Button

Exemples d'usage

Livrez votre produit,pas vos bugs.

① Hero / Landing — CTA principal d'inscription

② Composant produit — Bouton dans une carte pricing

Recevez la sélection hebdo

③ Micro-interaction de conversion — Validation de formulaire

Comment ça marche

Accessibilité

Compatibilité navigateur

Le code

Personnaliser

FAQ

Le bouton génère-t-il vraiment un son ?

Comment activer la classe .clicked ?

Puis-je l'utiliser dans React ou Vue sans conflit ?

Effets liés — Atmosphère

Livrez votre produit,
pas vos bugs.