Come creare un pulsante che cambia colore o immagine al passaggio del mouse

Oggi vi guiderò nella creazione di un bottone o pulsante web che cambia colore o immagine al passaggio del mouse sopra.

Con questo metodo potrete sbizzarrirvi nel creare pulsanti graficamente originali, e quando il mouse ci passerà sopra, muteranno forma o colore a seconda dello stile che gli avete assegnato.

Potrebbe esservi utile anche nel caso voleste realizzare dei banner pubblicitari o delle gif, o comunque qualsiasi tipo, forma o figura, che abbia un animazione differente quando il mouse passa sopra l’immagine.

Come prima cosa bisogna creare 2 tipi ti pulsanti dalla grafica diversa, per fare ciò utilizzate un qualsiasi tipo di programma di grafica, io mi farò supportare dal fidato Photoshop, poi sarà sufficiente inserire il codice nella parte in cui vorrete visualizzare il pulsante, sostituendo le immagini (URL) di esempio con le vostre. Vediamo subito come!

Creare pulsante che cambia al passaggio del mouse

Create ed assegnate due nomi differenti ai vostri pulsanti, in questo caso li chiameremo pulsante “youfriend button1″ e il secondo ” youfriend button2″.

base button1:

cambio button2:

Ora bisognerà creare ed inserire, dove lo si desidera, lo script codice che ci permetterà di avere l‘effetto di un pulsante che cambia colore al passaggio del mouse, in più inseriremo un link verso una pagina scelta.

codice esempio:

<a href="https://www.youfriend.it/"><img src = "https://www.youfriend.it/wp-content/uploads/2019/12/youfriendbutton1.jpg" onmouseout = "if (a==0) 
this.src = 'https://www.youfriend.it/wp-content/uploads/2019/12/youfriendbutton1.jpg';" onmouseover = "
this.src = 'https://www.youfriend.it/wp-content/uploads/2019/12/youfriendbutton2.jpg';a=0;" onclick = "a=1;"></a> 

Una volta modificato il codice, ecco come si presenterà il vostro pulsante html nella pagina in cui è stato inserito.

Il tutorial per creare dei pulsanti che cambiano al passaggio del mouse finisce qui, Buon lavoro!