Uff... tengo una idea, pero no estoy 100% seguro.
Primero que nada, tus botones actuales son estaticos... los que quieres poner ahora no lo son, es decir, cuando le pasas el mouse por arriba cambian de color (por eso hay 2 imagenes por cada boton).
Para incluir ese efecto, debes agregar al global.css algo asi:
/* Botones Reemplazados */
.boton-foro {
background: url(images/boton-foro.png) 0 0 no-repeat;
width: 96px;
height: 24px;
float: left;
margin-right: 5px;
}
.boton-foro:hover {
background: url(images/images/boton-foro.png) 0 -23px no-repeat;
}
Despues lo mismo pero con Hack, Noticias y demas. Solo debes reemplazar "foro" por el nombre de cada boton.
Luego en el header o donde vayas esos botones, deberias poner algo asi:
<a class="boton-foro" href="http://biogamerz.ok.pe/index.php" target="_blank"></a>
Teoricamente, cuando llamas la clase boton-foro deberia mostrar el boton del foro que creaste en el global.css, pero no estoy seguro de nada... jejejeje, proba!!...