Effetti per pulsanti animati

In questo articolo viene presentato un semplice modo per personalizzare i pulsanti del tuo sito con delle icone che si animano quando si passa sopra il cursore, utilizzando i CSS.

Per prima cosa ci possiamo affidare ad un sito come flaticon.com, che contiene una vasta gamma di icone. Icone di tutti i tipi e per tutti i gusti. Possiamo effettuare una ricerca mirata se abbiamo già in mente l’icona che ci serve oppure sfogliare tra le collezioni di icone per cercare un’ispirazione. Quelle che scegliamo le possiamo comodamente aggiungere alle Collections, cliccando sul simbolo + che compare quando ci passiamo sopra col mouse.

Conclusa la selezione di icone clicchiamo su Download Collection e poi su Iconfont. Una volta scaricato e decompresso il file, possiamo aggiungerlo all’interno della cartella css del nostro sito.

Il file all’interno della cartella che dovremo richiamare è flaticon.css

Includi il file flaticon.css

[code_snippet y=”2016″ name=”effetti-per-pulsanti-animati” id=”1″]

Ora che abbiamo incluso il file che si occupa di gestire le icone, possiamo creare il primo pulsante. Al tag <a> assegnamo due classi, una che contenga tutti gli stili generici da assegnare al pulsante e un’altra che sarà la classe associata all’icona. Possiamo conoscere il nome della classe dell’icona aprendo il file flaticon.css oppure il file index.html (che si trova sempre all’interno della cartella scaricata).

Crea il pulsante in HTML

Inserisci il codice nel punto in cui vuoi far comparire il pulsante.

[code_snippet y=”2016″ name=”effetti-per-pulsanti-animati” id=”2″]

Aggiungi stili e animazione con i CSS

Tutto ciò che rimane da fare riguarda adesso i fogli di stili.

[code_snippet y=”2016″ name=”effetti-per-pulsanti-animati” id=”3″]