L'interattività è una parte importante di qualsiasi sito web moderno, poiché mantiene gli utenti coinvolti e li incoraggia a dedicare più tempo alla navigazione. L'inclusione di elementi interattivi in un sito Web rende anche l'esperienza dell'utente più intuitiva perché suggerisce ciò che l'utente può fare.
Un esempio molto importante sono gli effetti hover, ovvero una particolare animazione che si ottiene quando un utente passa con il cursore del mouse su un determinato pulsante (o elemento), senza selezionarlo o cliccarlo. Grazie a questi effetti si possono ottenere ottimi risultati su qualsiasi sito Web con poco sforzo. Inoltre, gli effetti al passaggio del mouse sono probabilmente gli elementi più utilizzati nel web design, principalmente a causa della facilità di implementazione unita a un'esperienza utente migliorata.
Creare l'effetto: le tecnologie da utilizzare
HTML e CSS sono i linguaggi di base per la costruzione e la stilizzazione delle pagine web, quindi per procedere con la creazione delle animazioni hover. In particolare, conoscere HTML è essenziale per strutturare il contenuto della pagina e nello specifico il pulsante, mentre CSS consente di definire la resa in fase di visualizzazione.
La conoscenza di base di questi due linguaggi permetterà di creare dei particolari effetti hover accattivanti e funzionali, ottimizzando l'esperienza utente e migliorando l'aspetto del sito web. Il risultato finale che si vuole ottenere con questo tutorial è il seguente:
Il pulsante raffigurato viene animato non appena il cursore del mouse passa su di esso. In particolare viene creata un'animazione di ingrandimento del pulsante generando un effetto zoom in avanti con conseguente cambio del colore di sfondo.
La struttura HTML
Per prima cosa bisogna si inizia creando una semplice struttura HTML per il pulsante: la pagina index.html. Essa sarà composta da una sezione <head> contenente le proprietà cardini di una pagina HTML (meta tag, link CSS e title) e successivamente un <body> in cui viene inserito unicamente il pulsante. A quest'ultimo viene poi assegnata la classe hover-button che servirà per aggiungere lo stile tramite CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effetto Hover su Pulsante</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="hover-button">Clicca Qui</button>
</body>
</html>Nell'esempio si è scelto di creare un semplice pulsante di prova che presenta il testo "Clicca qui". Il contenuto del pulsante può essere liberamente personalizzato così come il resto dell'animazione e dello stile che verrà assegnato all'elemento.
Personalizzazione con CSS
Passando alla personalizzazione, si procede con la creazione dell'apposito file style.css che è stato precedentemente linkato alla pagina HTML mediante l'apposito tag. Questo file conterrà innanzitutto le proprietà riferite al body, ovvero il corpo della pagina:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}In particolare il body avrà un posizionamento gestito da display: flex e conseguente si avrà un allineamento centrato da justify-content e align-items del contenitore principale che si occupano rispettivamente della posizione verticale ed orizzontale degli elementi interni. Inoltre si è scelto di assegnare un colore di sfondo semi chiaro e di eliminare i margini della pagina.
.hover-button {
padding: 15px 30px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}CSS del pulsante
Una volta completato il body si può passare all'elemento principale della pagina: il pulsante. La classe hover-button contiene innanzitutto un padding uniforme di 15px nei lati verticali e di 30px nei lati orizzontali. Il testo "Clicca qui" ha una grandezza di 16px e il suo colore è bianco. Il pulsante presenta uno sfondo di colore blu e il suo bordo è nascosto tramite la proprietà border: none.
La sua forma risulta leggermente arrotondata grazie ai 5px di border-radius. Infine, il cursore viene trasformato in un puntatore non appena si passa sopra al pulsante.
La proprietà senza dubbio più importante è l'ultima: transition. Essa si occupa di assegnare il tipo di animazione e la sua durata: in questo caso cambierà il colore di sfondo con una durata di 0.3 secondi.
.hover-button:hover {
background-color: #0056b3;
transform: scale(1.1);
}Per poter gestire l'animazione hover, al passaggio del mouse, bisogna inserire una nuova istruzione in cui aggiungere l'elemento :hover subito dopo il nome della classe precedentemente creata.
Al suo interno vengono inserite due proprietà: background-color, il colore di sfondo che il pulsante assume al passaggio del mouse, e transform che ingrandisce il pulsante a seconda del valore preimpostato.
Codice HTML e CSS completo
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effetto Hover su Pulsante</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="hover-button">Clicca Qui</button>
</body>
</html>style.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.hover-button {
padding: 15px 30px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
.hover-button:hover {
background-color: #0056b3;
transform: scale(1.1);
}Quando verrà visualizzata la pagina index.html nel browser, si vedrà un pulsante blu centrato orizzontalmente e verticalmente. Al passaggio del mouse sul pulsante il colore di sfondo cambierà e il pulsante verrà ingrandito leggermente, creando un effetto hover interattivo.
Risultato e personalizzazioni con HTML e CSS
Il codice descritto ha permesso di creare un effetto hover al passaggio del mouse su un pulsante utilizzando solo HTML e CSS. Questo tipo di animazione rende un sito web più interattivo e accattivante e migliora anche la UX.
È possibile personalizzare ulteriormente l'effetto hover modificando i seguenti parametri nel CSS:
- colore di Sfondo: cambiando il valore di
background-colornel selettore:hover. - Effetto di Trasformazione: modificando il valore di
transform: scale()per variare l'entità dell'ingrandimento. - Durata della Transizione: cambiando il valore di
transitionper rendere l'effetto più veloce o più lento.
Questo il risultato finale:
