Nel mondo del web design i piccoli dettagli fanno spesso la differenza tra un'interfaccia gradevole e un'esperienza utente davvero coinvolgente. Tra questi dettagli, gli effetti visivi al click giocano un ruolo importante nel rendere l'interazione più naturale e dinamica. Uno degli effetti più utilizzati in ambito UI/UX, specialmente nelle app mobile e nei design ispirati al Material Design di Google, è il Ripple Effect. Un'onda che si propaga dal punto in cui l'utente clicca su un elemento, solitamente un pulsante.
Pulsante animato con effetto onda (Ripple Effect)
In questo tutorial verrà spiegato passo dopo passo come creare un pulsante con effetto onda al click utilizzando HTML, CSS e un pizzico di JavaScript. Non è necessario essere degli esperti. Basterà una conoscenza base di questi linguaggi per seguire la guida e replicare l'effetto all'interno di un sito web.
Cosa serve per realizzare questo effetto?
Per realizzare un pulsante con questo tipo di effetto utilizzeremo tre tecnologie fondamentali del web:
- HTML
- CSS
- JavaScript
Questo tipo di animazione non è possibile usando solo HTML e CSS poiché è necessario calcolare le coordinate esatte del punto di click all'interno del pulsante. Operazione che richiede l'intervento di JavaScript.
Il codice HTML
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsante con Ripple Effect</title>
<link rel="stylesheet" href="style.css"> <!-- Colleghiamo il file CSS -->
</head>
<body>
<button class="ripple-button">Cliccami</button>
<script src="script.js"></script> <!-- Colleghiamo il file JavaScript -->
</body>
</html>In questo blocco HTML
ripple-button
style.css
script.js
Il codice CSS per il Ripple Effect
.ripple-button {
position: relative;
overflow: hidden;
padding: 15px 30px;
background-color: #6200ea;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
outline: none;
}
.ripple-button:hover {
background-color: #3700b3;
}
.ripple {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.6);
transform: scale(0);
animation: ripple-animation 600ms linear;
pointer-events: none;
width: 100px;
height: 100px;
opacity: 1;
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}In questo foglio di stile viene creato un pulsante elegante e centrato nella pagina. La chiave dell'effetto onda è nella classe .ripple che viene generata dinamicamente con JavaScript. Si tratta di un cerchio bianco semitrasparente che parte da una scala di 0 e si espande fino a scomparire grazie all'animazione ripple-animation. Usando position: relative sul pulsante e absolute sull'onda, garantiamo che l'effetto si propaghi solo all'interno del pulsante cliccato. L'overflow: hidden fa sì che il cerchio non esca dai bordi. Il risultato è un'animazione fluida e ben integrata con il design del pulsante.
Infine, il codice JS
const buttons = document.querySelectorAll('.ripple-button');
buttons.forEach(button => { button.addEventListener('click', function(e) {
const rect = button.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const ripple = document.createElement('span');
ripple.classList.add('ripple');
// Imposta posizione e inserisce nel DOM
ripple.style.left = `${x - 50}px`; // -50 per centrare l'effetto (100px/2)
ripple.style.top = `${y - 50}px`;
button.appendChild(ripple);
// Rimuove dopo l'animazione
setTimeout(() => {
ripple.remove();
}, 600);
});
});Questo script ascolta il click su ogni pulsante con la classe .ripple-button
<span>
.ripple
Risultato finale e dimostrazione pratica
Una volta uniti HTML, CSS e JavaScript, il risultato è un pulsante con un elegante effetto onda al click. Ogni volta che l'utente clicca sul pulsante, un cerchio luminoso si espande partendo esattamente dal punto in cui ha cliccato, creando un'interazione moderna e gradevole. Di seguito l'anteprima che mostra il comportamento finale del pulsante:
Come si può notare, l'effetto è fluido, ben centrato sul punto di interazione e si dissolve automaticamente dopo pochi istanti, lasciando il pulsante libero per il click successivo. Questo tipo di animazione è particolarmente adatto per interfacce moderne, pulsanti di invio, conferme d'azione o call-to-action, migliorando sensibilmente la percezione di reattività e cura nei dettagli del tuo sito o applicazione.
