Pulsanti CSS: esercitazioni ed esempi
La creazione di pulsanti con i CSS è una delle tecniche di progettazione web più sperimentate in circolazione. Esempi e tutorial abbondano.
La più recente tendenza recente nel design dei pulsanti CSS sembra eliminare le immagini, in particolare le immagini di sfondo, dai pulsanti. Ma ci sono molte altre cose che i designer stanno facendo con i pulsanti, alcuni che includono le immagini.
Di seguito abbiamo raccolto oltre venti tutorial, esempi e strumenti per la creazione di pulsanti CSS, molti dei quali utilizzano CSS3.
Sono inclusi pulsanti per adattarsi praticamente a ogni stile di design. Abbiamo cercato di concentrarci su nuove tecniche qui, tralasciando le tecniche di vecchia data (come la metodo di porta scorrevole per creare angoli arrotondati) con cui la maggior parte dei designer ha già familiarità.
Se hai altri tutorial o esempi che desideri condividere, fallo nei commenti!
Tutorial e articoli
Riscoprire l'elemento del pulsante
Un articolo davvero utile che discute di button elemento in CSS, che è spesso trascurato dai designer. È un po 'più vecchio, ma ha ancora tonnellate di informazioni utili sulla creazione di pulsanti più eleganti con i CSS.
Bellissimi pulsanti CSS con set di icone
Ecco un altro articolo che parla di come creare pulsanti con icone, anche se usando span classi piuttosto che il button elemento.
Costruisci pulsanti CSS3 pratici
Questo video tutorial di Nettuts + mostra come creare pratici pulsanti CSS3 che includano anche ciò che sembra essere un'immagine di un'icona uccello di Twitter, ma in effetti è stato creato interamente con CSS3.
Bellissimi pulsanti simili a Photoshop con CSS3
Anche se i pulsanti qui non sono particolarmente lungimiranti in termini di aspetto, ciò che è sorprendente è che sono stati creati interamente utilizzando i CSS3, senza utilizzare immagini, e basati solo su pulsanti creati in Photoshop.
Pulsante migliore e interazioni di navigazione
Questo tutorial di Darren Hoyt è un ottimo tutorial sulla creazione di comportamenti migliori per i pulsanti che incoraggiano i visitatori a interagire con il tuo sito.
Super pulsanti fantastici con CSS3 e RGBA
Questo tutorial di Zurb copre l'utilizzo di CSS3 e alpha-blending utilizzando RGBA per creare pulsanti scalabili con una sola immagine PNG.
Costruire bellissimi pulsanti con sfumature CSS
Un tutorial per creare un pulsante usando gradienti CSS simili a quelli usati da Mozilla per Firefox Personas.
Come progettare un pulsante sexy usando CSS
Questo tutorial mostra come creare un pulsante grande e vibrante senza usare immagini.
Pulsanti CSS3 dall'aspetto realistico
Questi sono pulsanti semplici, creati interamente con CSS3, inclusi alcuni pseudo-elementi.
Abbastanza pulsanti CSS3
Questo tutorial mostra come creare un pulsante semplice, leggermente lucido, scalabile e che può essere creato in qualsiasi colore senza immagini.
Pulsanti CSS3 senza immagini
Un semplice tutorial per creare pulsanti dinamici che utilizzano solo CSS3 e nessuna immagine. Esistono quattro stati per ciascun pulsante, inclusi gli stati disattivati, al passaggio del mouse e selezionati.
5 diversi tutorial di pulsanti di collegamento di angoli arrotondati CSS dinamici
Questa è una raccolta di cinque diversi tutorial per creare pulsanti CSS con angoli arrotondati. Due includono l'uso delle immagini, ma gli altri tre no.
Crea un pulsante CSS3 che degrada piacevolmente
Fino a quando tutti i browser non supporteranno correttamente i CSS3, incontreremo dei problemi quando li utilizziamo per creare cose come i pulsanti. Questo tutorial mostra come creare fantastici pulsanti CSS3 che abbiano anche un bell'aspetto nei vecchi browser, come IE6 e 7.
La barra di navigazione di Apple utilizza solo CSS
Questo tutorial mostra come ricreare il menu di navigazione in stile pulsante sul sito Web di Apple. Funziona meglio in Safari 3+, ma sembra ancora bene negli altri browser.
Crea un pulsante di chiamata all'azione CSS3
Questo tutorial mostra come creare un pulsante di invito all'azione interamente con CSS che include diversi stati di default e di passaggio del mouse.
Bottoni sexy con CSS3
Questo semplice tutorial mostra come creare pulsanti piacevolmente stilizzati con hover e stati attivi unici. I pulsanti possono essere ridimensionati e il loro colore può essere cambiato facilmente.
Pulsanti lucidi senza immagini usando solo CSS3
Guardando questi pulsanti, è difficile credere che siano fatti senza immagini se non si guarda molto da vicino. Il codice è complicato, ma il risultato finale sembra fantastico, completo di effetto hover.
Pulsanti CSS3 con icone
Questo tutorial mostra come creare pulsanti CSS3 con sfumature che includono anche immagini di icone e sono compatibili con browser diversi.
Crea i tuoi pulsanti Google
Questo tutorial mostra come creare pulsanti di stile di Google scalabili con bordi colorati. I risultati finali sono minimalisti e puliti.
Esempi e strumenti
10 fantastici pulsanti CSS3 da utilizzare sul tuo sito web
Ecco una raccolta di dieci pulsanti che puoi utilizzare sul tuo sito web. Sono tutti piuttosto semplici ma creati usando solo CSS3 senza immagini.
Pulsanti sfumatura CSS3
Questa è una vasta collezione di pulsanti CSS3 di Web Designer Wall. Sono incluse una varietà di forme, dimensioni e colori, tutti con sfumature. Una delle parti migliori su di loro, tuttavia, è il modo con cui questi pulsanti degradano con garbo nei browser che non dispongono del supporto completo per CSS3.
Creatore di pulsanti
CSS-Tricks offre questo creatore gratuito di pulsanti CSS3. Basta definire i colori di sfondo per ogni stato del pulsante, la dimensione e gli attributi del testo e creerà il codice CSS per te.
Pulsanti radioattivi
Questi pulsanti utilizzano le animazioni CSS in Safari per creare un effetto pulsante e luminoso. In altri browser che supportano CSS3, sono ancora perfettamente funzionanti e sembrano perfetti.
Conoscere altre tecniche per creare fantastici pulsanti CSS che non sono stati menzionati qui? O hai un esempio preferito? Si prega di condividerli nei commenti!