Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Consiglio rapido: pulsanti social premibili in CSS3

by
Length:ShortLanguages:

Italian (Italiano) translation by Sabrina Pampaloni (you can also view the original English article)

Ciao! Ho un consiglio rapido per te. Che ne dici di pulsanti per i social media premibili davvero grandiosi usando solo i CSS3? Suona fantastico, vero... bene, questo è ciò che ho in serbo per te oggi. Ti mostrerò come creare pulsanti davvero fantastici che puoi mettere su qualsiasi progetto, quindi iniziamo!~


Passo 1 Buttare giù un po' di codice HTML

Il codice qui è molto semplice, pulito e richiede solo poche righe.

Per la nostra classe principale useremo un .container che è usato soltanto se volete che i vostri abbiano esattamente lo stesso aspetto che in questo tutorial. Lo usiamo per posizionare i pulsanti al centro del nostro spazio di lavoro.
Poi useremo uno span per contenere il nostro pulsante e useremo la classe .button per creare spaziatura usando i margini nel nostro file CSS.
Infine aggiungeremo semplicemente un link, un'icona e del testo da mettere sul pulsante.

Questo è tutto per quanto riguarda il codice HTML per i pulsanti CSS3 e ora dovreste avere qualcosa di simile a questo...


Passo 2 Creare uno o più stili fantastici!

La prima cosa che aggiungeremo è un body con un bello sfondo blu ghiaia che si può trovare nei file sorgente. Poi aggiungeremo un colore ai nostri link e daremo stile al contenitore per centrare i pulsanti nella nostra pagina con margin: 0 auto.
Nessuno di questi tre stili è necessario quando userete i pulsanti nel vostro progetto, ma potreste voler creare uno stile specifico per i link, e per fare questo potete usare .button > a

Ora creiamo spazio tra i pulsanti così...

"Date ai vostri pulsanti uno stile che faccia in modo che gli utenti vogliano premerli.."

Ora che abbiamo i nostri begli spazi, possiamo iniziare a dar stile ai nostri pulsanti in modo che gli utenti vogliano premerli.

Creando un bel gradiente e un'ombreggiatura, possiamo dare ai pulsanti un po' di rilievo rendendoli più cliccabili. Poi aggiungiamo un po' di padding sopra, sotto e ai lati rendendo i pulsanti molto più facili da leggere.

Ora andiamo avanti e appiattiamo un po' il pulsante per farlo sembrare mezzo premuto usando il selettore :hover. Useremo anche il selettore :focus in modo da mantenere questi stili invece di duplicare il codice per quello stato.

Il pulsante a destra è come dovrebbe apparire lo stato hover.

Dopo aver creato l'effetto hover, aggiungeremo un po' di incasso (inset) ai pulsanti quando un utente clicca con il mouse, facendo sembrare che l'utente abbia premuto il pulsante. In questa tecnica abbiamo bisogno di usare due ombre e per fare questo semplicemente mettiamo una virgola fra di esse. Questo è il supporto per più di un'ombra.

A questo punto dovreste avere qualcosa come l'immagine sotto, con il bottone incassato nello stato di focus (il pulsante di esempio a sinistra).

Infine mettiamo un padding a destra per creare spazio tra le icone e il testo del pulsante, poi dovremmo spostare l'icona in basso per allinearla e, per farlo senza disturbare gli altri elementi, la soluzione migliore è di metterle una posizione relativa perché rimanga all'interno di .button e poi spingerla verso il basso di 2 pixel. Usando top invece di padding-top o di margin-top, influenziamo solo l'immagine invece dell'intero pulsante.

Ok, questo è tutto per quanto riguarda lo stile e dovreste ritrovarvi con qualcosa così...

Se il vostro non è proprio come l'immagine sopra, tornate indietro e controllate il vostro lavoro.

E questo è tutto, gente...

Ottimo lavoro! Avete creato dei pulsanti in CSS3 davvero fantastici che invitano gli utenti ad agire. Grazie per aver partecipato e spero sinceramente che abbiate imparato qualcosa di nuovo e prezioso in questa lezione.
Restate sintonizzati per altri tutorial in arrivo. Inoltre potete vedere alcuni dei miei prodotti nel marketplace Envato sotto il profilo dell'autore.

Lasciate domande o commenti in seguito.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.