Ya arkadaşlar işin acemisiyim, internette gördüklerim ile 5 adetten oluşan bir resimli hover butonu yapmaya uğraşıyorum.

Sanırım hem gereğinden fazla kod uzunluğu oluştu hemde butonlarım alt alta listelendi.

kullandığım kod aşağıdaki gibi

style.css

#f1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f1.png") no-repeat 0 0;

}

#f1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f2.png") no-repeat 0 0;
}




#t1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t1.png") no-repeat 0 0;

}

#t1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t2.png") no-repeat 0 0;
}




#g1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g1.png") no-repeat 0 0;

}

#g1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g2.png") no-repeat 0 0;
}




#y1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y1.png") no-repeat 0 0;

}

#y1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y2.png") no-repeat 0 0;
}




#r1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r1.png") no-repeat 0 0;

}

#r1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r2.png") no-repeat 0 0;
}

bileşenlerdeki metin kutusuna koyduğum linkler

<a id="f1" href="#" title="Facebook"></a>
<a id="t1" href="#" title="Twitter"></a>
<a id="g1" href="#" title="Google+"></a>
<a id="y1" href="#" title="Youtube"></a>
<a id="r1" href="#" title="RSS"></a>

göründüğü şekli




Şimdi bunları tek bir css kodunda nasıl toparlarım? ve alt alta değilde yan yana nasıl sıralarım?