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
[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).
Inserisci il codice nel punto in cui vuoi far comparire il pulsante.
[code_snippet y=”2016″ name=”effetti-per-pulsanti-animati” id=”2″]
Tutto ciò che rimane da fare riguarda adesso i fogli di stili.
[code_snippet y=”2016″ name=”effetti-per-pulsanti-animati” id=”3″]
Se sei un appassionato di oggetti da collezione, è probabile che tu abbia già sentito…
Se ne soffri la conosci e se non ne soffri, invece, sarebbe meglio conoscerla per…
Da sempre l’uomo è rimasto affascinato e si è interessato alla magia. Che sia nella…
Il contratto di locazione a canone concordato è una forma di locazione in cui la misura del…
Negli ultimi anni, soprattutto da dopo la pandemia, sempre più italiani si sono rivolti a…
Stai pensando di abbellire il tuo giardino installando una piscina di ultima generazione? Se la…