CSS3 sta cambiando completamente il gioco per la creazione di pulsanti sul web. Le tecniche che una volta erano possibili solo con le immagini ora sono facilmente eseguibili con poche righe di codice. Per questo post abbiamo creato su misura sei pulsanti CSS dal design accattivante che puoi copiare e incollare direttamente nei tuoi progetti, con zero attribuzioni richieste.
Come con qualsiasi cosa di buono in CSS3, i pulsanti qui sotto funzionano alla grande nei browser Webkit e Mozilla, ma le varie versioni di IE non saranno sufficienti.
Una breve nota sulla semantica
Gli esempi sottostanti sono un po 'pesanti sul codice HTML e molti di questi potrebbero essere più snelli. Li ho strutturati in questo modo in modo da poter mantenere il CSS carino e separato per varie parti del pulsante. Questo è così puoi mescolare e abbinare diverse porzioni di ciascuno degli esempi qui sotto. Se implementi uno di questi, assicurati di dare un'occhiata da vicino sia al CSS che all'HTML per vedere se riesci a tagliare il grasso.
Tasto rotondo: due linee
A volte una sola riga di testo non la taglia. Usa questo pulsante quando hai molto da dire e vuoi riempirlo in un piccolo spazio. Per lo styling, ho usato un gradiente da # 99CF00 a # 6DB700 e alcuni semplici trattamenti di confine.
HTML
CSS
Pillola rossa
Questo semplice ma attraente pulsante rosso utilizza angoli fortemente arrotondati per conferirgli una forma simile a una pillola. Troverai un gradiente di sfondo da # d46d45 a # b1432a e alcuni lievi effetti di bordo in alto e in basso. Ancora una volta, l'effetto hover è semplicemente un effetto inverso.
HTML
CSS
Letterpress scuro
Qui ho usato una tecnica di stampa tipografica per ottenere uno sguardo all'interno del testo. Fondamentalmente tutto ciò che fai è rendere il testo più scuro dello sfondo e poi dargli un'ombra di colore chiaro. Per l'effetto hover ho solo illuminato leggermente i colori.
HTML
CSS
Bellezza nera
Per questo pulsante, volevo davvero creare qualcosa di elegante e di classe. Per realizzare ciò, ho implementato tre trucchi. Innanzitutto, ho applicato alcune sfumature ferme per dargli quel look lucido. Successivamente, ho applicato un'ombra interna, che è un grande trucco per aggiungere profondità e effetti di luce. Alla fine, ho applicato un leggero bagliore attraverso l'uso di un'ombra di testo.Al passaggio del mouse, riduco il bagliore e intensifico l'ombra.
HTML
CSS
Pillola blu con icona
Il pulsante pillola blu combina lo stile lucido del pulsante precedente con la forma della pillola rossa dall'alto. Ancora una volta ho usato sfumature lucide e ombreggiature interne, ma per rendere le cose interessanti ho aggiunto un'icona: una piccola matita. Il bello di questa icona è che non richiede caratteri speciali, solo HTML! È una piccola aggiunta che può davvero ravvivare un pulsante di contatto con zero sforzi.
HTML
CSS
Come / non mi piace pulsanti
Qui ho creato due pulsanti circolari per implementare un semplice sistema di valutazione. Il pulsante verde indica un voto positivo e il rosso un voto negativo. Come per l'ultimo pulsante, le icone qui sono puramente HTML e non richiedono trucchi @ font-face.
HTML
CSS
Conclusione
Spero che questi pulsanti ti siano utili. Anche se le limitazioni del browser fanno sì che alcune di queste non siano del tutto pronte all'implementazione, forniscono comunque ottimi esempi di apprendimento per alcune delle fantastiche nuove funzionalità di CSS3.
Lascia un commento e facci sapere cosa ne pensi!