Bellissimi Effetti Hover per Bottoni con box-shadow – CSS Only

Gli effetti hover sono una delle prime cose che un utente nota quando interagisce con un sito web. Sono dettagli che fanno la differenza, contribuendo a migliorare la user experience e a rendere un sito più accattivante e professionale. In questo articolo, vedremo come creare dei fantastici effetti hover per bottoni utilizzando solo HTML e CSS, sfruttando in particolare la proprietà box-shadow.

Ogni effetto hover che presenteremo è unico e dona ai bottoni una sensazione visiva e interattiva particolare: dall’effetto di riempimento al pulse, fino all’animazione del bottone che sembra sollevarsi. Questi effetti sono perfetti per migliorare il design del tuo sito e coinvolgere di più i tuoi visitatori.

Step 1: HTML per la Creazione dei Bottoni

Per iniziare, creiamo la struttura HTML che contiene i nostri bottoni:

<div class="buttons">
  <h1>CyberAlchimista hover <code>box-shadow</code></h1>
  <button class="fill">Fill In</button>
  <button class="pulse">Pulse</button>
  <button class="close">Close</button>
  <button class="raise">Raise</button>
</div>

• <div class="buttons">: Contiene tutti i bottoni e il titolo.
• <button class="fill">: Ogni bottone ha una classe specifica per applicare l’effetto hover desiderato. I bottoni sono “Fill In”, “Pulse”, “Close”, e “Raise”, ognuno con un effetto diverso.

Step 2: Stile CSS per gli Effetti Hover

La magia degli effetti hover avviene principalmente grazie alla proprietà box-shadow e alle variabili CSS che rendono il tutto facile da personalizzare. Vediamo i dettagli:

.fill:hover,
.fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
}

.pulse:hover,
.pulse:focus {
  -webkit-animation: pulse 1s;
  animation: pulse 1s;
  box-shadow: 0 0 0 2em transparent;
}
@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

.close:hover,
.close:focus {
  box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
}

.raise:hover,
.raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.25em);
}

Spiegazione degli Effetti:

1. Fill In: Utilizza box-shadow con la proprietà inset per far sembrare che il bottone si riempia dall’interno. Quando l’utente passa sopra il bottone, il riempimento si espande verso il centro.
2. Pulse: Crea un effetto di “battito” (pulse) animato grazie all’uso di @keyframes. L’ombra del bottone si espande e si ritrae, rendendolo più visibile.
3. Close: L’effetto prevede due ombre che si espandono contemporaneamente dai lati sinistro e destro del bottone, creando un effetto di “chiusura”.
4. Raise: Con questo effetto, il bottone sembra sollevarsi dalla pagina grazie all’uso di una box-shadow più lunga e un leggero transform verso l’alto.

Step 3: Definire le Variabili CSS

Utilizziamo le variabili CSS per definire i colori di base e quelli al passaggio del mouse:

.fill {
  --color: #a972cb;
  --hover: #cb72aa;
}

.pulse {
  --color: #ef6eae;
  --hover: #ef8f6e;
}

.close {
  --color: #ff7f82;
  --hover: #ffdc7f;
}

.raise {
  --color: #ffa260;
  --hover: #e5ff60;
}

Queste variabili rendono facile cambiare i colori dei bottoni e degli effetti, garantendo al contempo coerenza nel design. In ogni classe di bottone (.fill, .pulse, ecc.), --color rappresenta il colore di base e --hover rappresenta il colore durante l’hover.

Step 4: Aggiungere Animazioni e Stili Generali per i Bottoni

Ecco come completiamo lo stile generale dei bottoni:

button {
  color: var(--color);
  transition: 0.25s;
}

button:hover, button:focus {
  border-color: var(--hover);
  color: #fff;
}

• transition: 0.25s: Questo assicura un’animazione fluida quando il bottone cambia colore o si applica un’ombra.
• Colori e Border: Il colore del testo e il bordo cambiano durante l’hover, migliorando la visibilità dell’effetto.

Conclusione

Questi effetti hover sono semplici da implementare ma estremamente efficaci per aumentare il coinvolgimento degli utenti sul tuo sito. Che tu voglia dare un aspetto divertente, dinamico o moderno, l’uso appropriato di box-shadow e transizioni può davvero fare la differenza.

Gli effetti presentati in questo articolo sono perfetti per:

• Pulsanti Call-to-Action (CTA): Dove vuoi che l’utente sia incoraggiato a interagire.
• Migliorare la Navigazione: Rendendo i bottoni di navigazione più evidenti.
• Esperienze Interattive: Dare un tocco unico che renda il tuo sito memorabile.

Hai trovato utile questo Articolo? 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.