Oggi faremo un passo indietro dalle discussioni avanzate sui preprocessori CSS e torneremo su alcune buone nozioni di base. Lavoreremo su quattro semplici pulsanti CSS, ognuno con un esclusivo effetto hover animato.
Segui insieme a me e crea i tuoi stili di pulsanti divertenti. Inoltre sentiti libero di prendere il mio codice e usarlo nei tuoi progetti. Se sei un principiante di CSS che cerca un buon modo per rendere i tuoi pulsanti più interessanti, questo articolo è per te!
Cosa stiamo costruendo
Ho buttato tutti i pulsanti in un'unica demo in modo da poter dare una rapida occhiata a tutto ciò che andremo a finire oggi. Clicca sul link qui sotto per controllarli!
demo: Clicca qui per il lancio.
Impostazioni globali
Prima di iniziare sui singoli pulsanti, ecco alcune impostazioni globali che ho applicato a tutti gli esempi.
HTML
A scopo di sperimentazione, sto semplicemente usando un semplice link e lo stilo come un elemento di blocco. Ho sempre qualche brutto commento su questa tecnica, se vuoi usare un input, sii mio ospite!
CSS
Per il CSS, ho semplicemente impostato il carattere su Helvetica, assicurandomi che il testo fosse bianco e disattivato qualsiasi decorazione di testo predefinita (sottolineature) per i collegamenti.
Pulsante in crescita
Il nostro primo esperimento con il pulsante è uno dei miei preferiti. Anche se ci aspettiamo quasi sempre una sorta di effetto hover quando passiamo il mouse su un link o un pulsante sul web, di solito ci aspettiamo qualcosa di abbastanza sottile, così questo viene con una bella sorpresa: cambia la sua forma!
L'idea di base è che tu abbia un semplice pulsante con un messaggio, nel nostro esempio useremo? Iscriviti ora.? Quindi, quando si passa il mouse sopra il pulsante, cresce orizzontalmente per rivelare una parte del messaggio che era originariamente nascosta. Vediamo come funziona.
CSS di base
Per iniziare, dobbiamo solo dare al nostro pulsante una forma e un colore di base. Qui ho impostato l'altezza a 28px e la larghezza a 115px, aggiunto alcuni margini e imbottitura e ho dato al pulsante un leggero bordo.
Fancy CSS3
Alcune persone si eccitano quando si utilizza troppo CSS su un semplice pulsante. Per questo motivo, sto separando i lunghi stili CSS3 che userò. Gli stili di questa sezione sono completamente opzionali e rendono semplicemente il pulsante più moderno e cool.
Ho iniziato con un bordo-raggio di 15px di base per darci delle belle curve arrotondate e poi ho aggiunto una leggera sfumatura di sovrapposizione. Il gradiente inizia a trasparente e sfuma in nero. Questo è un piccolo trucco che uso per applicare un gradiente di oscuramento rapido che funziona praticamente con qualsiasi colore di sfondo.
Animazione CSS
Ora è il momento di impostare la nostra transizione CSS. Questo è abbastanza semplice, la cosa più fastidiosa è che, come sopra, dobbiamo ripeterlo così tante volte! Qui ho impostato l'animazione per influenzare tutte le modifiche, la durata a mezzo secondo e la funzione di temporizzazione per facilitare.
Hover CSS
Per finire, tutto ciò che dobbiamo fare è aggiungere uno stile hover che espande la larghezza. Ho misurato 200 px come larghezza sufficiente per mostrare il testo nascosto. Ora passa il mouse sopra il pulsante per un'animazione fluida che rivela un messaggio nascosto!
Simple Color Shift
Questa è la più semplice di tutte le animazioni dei pulsanti CSS. È così semplice che ho esitato ad includerlo, ma perché è un'opzione popolare ho pensato di buttarlo dentro. Quello che succede qui è che hai un colore di sfondo che cambia al passaggio del mouse, ma usiamo una transizione come quella sopra per gradualmente spostare il colore piuttosto che avere il cambiamento essere immediato.
CSS di base
Il CSS è molto simile all'ultima volta con alcune modifiche notevoli. Ho aggiunto un colore di sfondo diverso e ho cambiato leggermente la forma. Ho anche centrato il testo allineato e impostato l'altezza della linea all'altezza verticale del pulsante per centrarlo.
Fancy CSS3
Ancora una volta, abbiamo alcuni stili visivi completamente opzionali. Ho impostato un po 'meno un raggio di confine, ho applicato un gradiente di sfondo simile e ho aggiunto l'elemento aggiuntivo di un'ombra di riquadri. Usando rgba con l'ombra, l'ho impostato su nero e quindi ho ridotto la trasparenza.
Animazione CSS
Possiamo praticamente utilizzare la stessa configurazione di transizione che abbiamo utilizzato nell'esempio precedente:
Hover CSS
Per terminarlo, applica semplicemente un colore di sfondo diverso al passaggio del mouse. Prova a scegliere una variante leggermente più brillante del colore in Photoshop in modo che la transizione risulti piacevole. Dai un'occhiata anche a 0to255.com per un ottimo strumento che ti aiuta a prendere le variazioni di colore.
Spostamento dell'immagine di sfondo
Questo è davvero interessante e può avere risultati drammaticamente differenti in base alla selezione dell'immagine di sfondo. Userò uno schema molto sottile quindi di conseguenza l'effetto sarà piuttosto sottile. Prova a usare qualcosa di più audace per un risultato finale più pazzo.
Ecco il succo: applicate un'immagine di sfondo al pulsante, quindi spostate la posizione dello sfondo al passaggio del mouse. Toss in una transizione e ottieni un buon effetto di scorrimento.
CSS di base
Per la maggior parte, questo è proprio come nell'esempio precedente. Tuttavia, nota che ora abbiamo applicato un'immagine di sfondo (che verrà ripetuta per impostazione predefinita). Ho impostato la posizione di sfondo iniziale su? 0 0? solo così puoi farti un'idea di come funzionerà. Quando impostiamo gli stili di hover in un secondo momento, sposteremo semplicemente questa posizione verticalmente.
Fancy CSS
Non c'è nulla di speciale qui che non siamo già passati, solo alcuni angoli arrotondati e un'ombra.
Animazione CSS
Ancora una volta usiamo lo stesso snippet per la nostra animazione. Questa volta ho aumentato la durata a 0,8 secondi in modo che duri un po 'più a lungo.
Hover CSS
Ora è il momento di spostare quella posizione di sfondo. Ricorda che abbiamo iniziato a? 0 0 ?. Ora sposteremo l'immagine verticalmente impostando il secondo numero a 150px. Se volessimo spostare la posizione orizzontale, cambieremmo il primo numero.
Pulsante premuto 3D
Per il nostro ultimo trucco, imiteremo un popolare pulsante 3D simulato che sembra essere premuto quando ci si passa sopra. Questa animazione è così semplice che non avremo nemmeno bisogno di transizioni CSS, ma il prodotto finale è ancora un'animazione piuttosto carina, anche se immediata.
CSS di base
Ecco il CSS di base per il nostro ultimo pulsante. Si noti che sia questo che l'ultimo esempio utilizzano ombre di testo sottili per aiutare il testo a risaltare un po 'di più.
Fancy CSS
Questa volta il fantasioso CSS non è opzionale. Se vuoi ottenere questo effetto, avrai almeno bisogno dell'ombra e del gradiente. L'ombra dura è ciò che dà al pulsante il falso effetto 3D. Non è l'illusione più convincente di sempre, ma è comunque un bel pulsante.
Hover CSS
Questo è il nostro più grande pezzo di CSS hover ancora. Fondamentalmente riduciamo la lunghezza dell'ombra e spostiamo quella trasformazione con un margine. Questo dà l'illusione del pulsante premuto. Lanciare la sfumatura intorno aiuta anche l'illusione.
Conclusione
Dopo aver letto questo breve tutorial, dovresti avere una conoscenza esperta su come implementare gli stili CSS3 di base per rendere un pulsante bello e attraente. Dovresti anche avere una comprensione decente di come funzionano le transizioni CSS e cosa serve per renderle compatibili con i browser. Infine, dovresti avere alcune idee fantastiche per creare fantastici effetti al passaggio del mouse.
Lascia un commento e fammi sapere cosa ne pensi. Hai usato effetti simili in passato? Come modificherai o migliorerai questi esempi?