Creare effetti hover interessanti e dinamici è un ottimo modo per aggiungere interattività e migliorare l’esperienza utente sulle tue pagine web. In questo articolo, esploreremo come realizzare effetti hover su icone utilizzando CSS moderno. Vedremo esempi pratici per creare vari effetti di animazione che possono essere applicati ai tuoi bottoni o icone di navigazione, rendendo il design del tuo sito unico e accattivante.
Per approfondire altri effetti CSS:
- Effetti hover solo con CSS: 10 esempi pratici
- 10 effetti hover CSS per animazioni fluide e professionali
- Animazioni CSS moderne: guida pratica
Introduzione agli Effetti Hover con CSS
Gli effetti hover sono animazioni o transizioni che si attivano quando l’utente posiziona il cursore su un elemento della pagina web, come un pulsante o un’icona. Questi effetti, che forniscono un feedback visivo importante, possono variare da semplici cambiamenti di colore a transizioni più complesse che coinvolgono dimensioni, ombre e trasformazioni. L’aggiunta di animazioni hover contribuisce a migliorare l’interattività del sito e l’esperienza dell’utente. Questi effetti possono variare da semplici cambiamenti di colore a transizioni più complesse che coinvolgono dimensioni, ombre e trasformazioni.
HTML per le Icone
Iniziamo con la struttura HTML necessaria per implementare questi effetti hover. L’HTML definisce la serie di link che contengono icone, utilizzando elementi i per includere le icone, spesso derivanti da una libreria come FontAwesome. L’HTML è semplice e definisce una serie di link che contengono icone.
<div class="wrapper">
<a href="#" class="icon">
<i class="fa fa-home"></i>
</a>
<a href="#" class="icon">
<i class="fa fa-user"></i>
</a>
<a href="#" class="icon">
<i class="fa fa-bars"></i>
</a>
<a href="#" class="icon">
<i class="fa fa-sign-in"></i>
</a>
<a href="#" class="icon">
<i class="fa fa-phone"></i>
</a>
</div>Articoli correlati:
CSS di Base per le Icone con Flexbox
Definiamo ora il CSS di base per questi elementi. Utilizzeremo Flexbox per allineare le icone e assicurarci che siano ben disposte e stilizzate.
.wrapper {
display: flex;
gap: 1.5rem;
}
.icon {
cursor: pointer;
position: relative;
display: flex;
width: 60px;
height: 60px;
border-radius: 30px;
overflow: hidden;
text-decoration: none;
align-items: center;
justify-content: center;
background-color: #333;
transition: all 0.25s ease;
}
.icon i {
position: relative;
color: #FFFFFF;
font-size: 23px;
margin: auto;
}In questo esempio, abbiamo definito le basi del nostro layout usando Flexbox per allineare le icone al centro sia orizzontalmente che verticalmente. Ogni icona ha un bordo arrotondato per creare l’effetto di cerchio.
Aggiungere Effetti Hover – Fill Effect
Il Fill Effect crea un’animazione in cui l’icona sembra essere riempita con un colore quando si passa il mouse sopra. Questo effetto è particolarmente utile per creare pulsanti che catturano l’attenzione dell’utente, ad esempio in sezioni di invito all’azione (CTA) come pulsanti di iscrizione o di contatto. Utilizziamo pseudo-elementi ::before per creare l’effetto.
.icon::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 1px #16A085;
transition: all 0.5s ease;
}
.icon:hover::before {
box-shadow: inset 0 0 0 60px #16A085;
}Questo codice utilizza il box-shadow per creare un effetto di riempimento all’interno dell’icona. Quando l’utente passa il mouse sopra l’icona, l’ombra interna si espande, creando l’illusione del riempimento.
Per saperne di più:
- Aggiungere gradienti animati con background CSS
- 10 effetti hover CSS per animazioni fluide e professionali
Effetto Slide – Animazione di Scorrimento
L’Effetto Slide crea un’animazione in cui il colore si sposta da sinistra verso destra quando l’utente passa il mouse sull’icona.
.icon::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 1px #EB9532;
transition: all 0.5s ease;
}
.icon::before {
border-radius: 0;
margin-left: -100%;
box-shadow: inset 0 0 0 60px #EB9532;
transition: all 0.5s ease;
}
.icon:hover::before {
margin-left: 0;
}In questo effetto, l’elemento ::before viene animato per scorrere all’interno del contorno del pulsante, creando un effetto di scorrimento molto interessante.
Articoli correlati:
Effetto Expand – Espansione al Passaggio del Mouse
L’Effetto Expand fa espandere il colore di sfondo del pulsante quando l’utente ci passa sopra con il cursore, aggiungendo un tocco visivo molto interessante.
.icon::before {
background: #C82647;
box-shadow: inset 0 0 0 60px #151515;
transition: all 0.5s ease;
}
.icon:hover::before {
box-shadow: inset 0 0 0 1px #151515;
}In questo caso, quando l’utente passa il mouse sull’icona, il colore di sfondo si espande rapidamente, creando un effetto di enfasi sull’icona stessa.
Per approfondire:
- Realizzare un Effetto Hover Avanzato per una Card Prodotto
- Effetto Hover Riflesso su Immagine con CSS: Guida Completa
Conclusione
Gli effetti hover non solo aggiungono valore estetico, ma migliorano anche l’esperienza utente, fornendo feedback visivi e rendendo l’interazione con il sito più divertente e coinvolgente. Con questi esempi, puoi aggiungere al tuo sito diversi effetti di hover per rendere il design più interattivo e professionale. Per ulteriori tutorial e per scoprire come ottimizzare altri aspetti del tuo sito, visita il nostro blog e segui Cyberalchimista sui social! Con questi esempi, puoi aggiungere al tuo sito diversi effetti di hover per rendere il design più interattivo e professionale.
Hai trovato utile questa guida? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.
