Codice dei pulsanti con effetto

Innanzitutto cosa sono? (Fuori argomento)
E dove metto questo codice?

Link" title="home" onclick="mainboard.show(this);return; a">http://www.cantilux.net/files4/2088515309.png';" onmouseout="this.src='https://2img.net/r/ihimizer/img805/1189/homeff.png';">




Link" title="facebook" onclick="mainboard.show(this);return; ">

Javascript o Html? GRAZIE

Ps: Scusate se compaiono i link

Se ho capito bene parli di quei pulsanti che cambiano colore al passaggio del mouse. Basta che inserisci questo nel CSS e cambi le immagini a seconda di quelle che vuoi:

Codice:

#i_icon_mini_index {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/forum13.png');
width: 68px;
height: 27px;
}
#i_icon_mini_index:hover {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/forumh12.png');
width: 68px;
height: 27px;
}
#i_icon_mini_new_message {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/6110.png');
width: 68px;
height: 27px;
}
#i_icon_mini_new_message:hover {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/5110.png');
width: 68px;
height: 27px;
}
#i_icon_mini_login {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/3lo12.png');
width: 68px;
height: 27px;
}
#i_icon_mini_login:hover {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/3l10.png');
width: 68px;
height: 27px;
}
#i_icon_mini_register {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/reg210.png');
width: 71px;
height: 27px;
}
#i_icon_mini_register:hover {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/reh10.png');
width: 71px;
height: 27px;
}
#i_icon_mini_logout {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/2lo10.png');
width: 68px;
height: 27px;
}
#i_icon_mini_logout:hover {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/2l10.png');
width: 68px;
height: 27px;
}
#i_icon_mini_portal {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/portal11.png');
width: 68px;
height: 27px;
}
#i_icon_mini_portal:hover {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/portal10.png');
width: 68px;
height: 27px;
}
#i_icon_mini_gallery {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/gal10.png');
width: 68px;
height: 27px;
}
#i_icon_mini_gallery:hover {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/galler10.png');
width: 68px;
height: 27px;
}

#i_icon_mini_profile {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/profil11.png');
width: 68px;
height: 27px;
}
#i_icon_mini_profile:hover {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/profil10.png');
width: 68px;
height: 27px;
}
#i_icon_mini_message {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/4210.png');
width: 51px;
height: 27px;
}
#i_icon_mini_message:hover {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/4pm10.png');
width: 51px;
height: 27px;
}
#i_icon_mini_members {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/810.png');
width: 71px;
height: 27px;
}
#i_icon_mini_members:hover {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/710.png');
width: 71px;
height: 27px;
}
#i_icon_mini_search {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/search13.png');
width: 68px;
height: 27px;
}
#i_icon_mini_search:hover {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/search12.png');
width: 68px;
height: 27px;
}
#i_icon_mini_groups {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/1gr10.png');
width: 68px;
height: 27px;
}
#i_icon_mini_groups:hover {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/1grou10.png');
width: 68px;
height: 27px;
}
#i_icon_mini_portal {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/portal11.png');
width: 68px;
height: 27px;
}
#i_icon_mini_portal:hover {
background-image: url('http://i32.servimg.com/u/f32/15/52/75/08/portal10.png');
width: 68px;
height: 27px;
}


Saluti

Ciao Primahs, potresti fare così :
Inserisci questo codice:

Codice:

<div id="bottone"><a href="LINK INDIRIZZO" target="_blank"><img src="LINK IMMAGINE"/></a></div>

E poi nel CSS inserisci questo codice:

Codice:

.bottone {
opacity:0.5;
transition-duration:0.5s;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
  }

.bottone:hover {
  opacity:1.9;
  }


Spero di esserti stato utile .

Saluti, MartinoPio

Non cambiano colore, https://aiuto.forumattivo.it/t14618-pulsanti-con-effetto#100016 Naturalmente ci sono anche i css per fare queste cose.

Lo so, non intendevo questo, parlavo di quei pulsanti su cui quando passi sopra col mouse si sfocano o si ingrandiscono

Allora il css e html di MartinoPio va bene

Grazie :)