Si hay algo que me fascina de la Xbox 360 es su interfaz, puede que no sea la más bonita ni la más práctica, pero la sencillez y estructuración que tiene es envidiable, por eso, si quieres poner un pedacito de ella en tu web (Ver imagen), sigue leyendo.

Si solo quieres el código, miralo acabado.

Aparte de los botones estilo banner, hay dos tipos principales, los grandes y los pequeños (en altura), para este tutorial, la base será el pequeño, y a partir de él y a través de clases, generaremos el otro estilo y cambiar la imagen, hora de empezar!

Paso 1

Ante todo, el código html debería de ser semántico y accesible (y si valida, mejor), por eso, de momento solo hace falta una simple lista desordenada con enlaces puesta en línea.

<ul class="menucuco">
<li><a href="#">Buscar</a></li>
<li><a href="#">Categorias</a></li>
<li><a href="#">Destacado</a></li>
<li><a href="#">Feed RSS</a></li>
<li><a href="#">Enviar</a></li>
<li><a href="#">Ayuda</a></li>
</ul>

.menucuco {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menucuco li {
display: inline;
}

El CSS hace que la lista deje de ser tal (list-style-type: none), y luego quita el margen y el relleno resultante a los elementos que la componen, si has hecho todo bien, deberias tener lo de abajo.

Paso 2

Esto no se parece en nada al resultado final y de hecho da asco, pero ahora es cuando empieza la magia, añade este ladrillo al css para comprobarlo:

.menucuco a {
display: block;
width: 200px;

font-family: “Segoe UI”, Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
color: #333333;
letter-spacing: -1px;

background-image: url(http://lararala.com/t/go-home.png);
background-repeat: no-repeat;
background-position: 10px center;

padding-left: 40px;
padding-top: 2px;
padding-bottom: 2px;

border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
margin-top: -1px;
}

He dividido la clase en bloques para describirlo mas facilmente, puedes eliminar las lineas vacias si adoras optimizar código, de ambas maneras funcionará bien.

El 1º bloque convierte la etiqueta a (Enlace) en un elemento de bloque y le da 200px de ancho.

El 2º bloque define las fuentes, puedes ponerlo a tu gusto, aunque recuerda que cada fuente tiene su altura y luego podria desfigurarse, el letter-spacing: -1px; es una mania personal, que junta un poco las letras entre si.

El 3º bloque define el icono del botón, todos los iconos del tutorial son del Tango Desktop Project, background-position: 10px center; se refiere a la ubicación de la imagen, horizontalmente está corrida 10px a la derecha y centrada en vertical.

El 4º bloque es la ubicación del texto, a base de paddings.

El 5º bloque (uf) es los bordes del botón y un pequeño truco, cuando pones bordes arriba y abajo, obviamente provocan uno de 2 píxeles entre ellos, pero si añades un margen negativo (margin-top: -1px;), se compensa y asunto arreglado.

Paso 3

Como ya dije antes, esto es la base de el resto de botones, por eso el tamaño colosal de la clase, ahora toca hacer los botones grandes, con iconos de 32×32, para ello, ya que el navegador no lee la mente, tienes que añadir una clase (class="x2") a los 4 primeros a, y acontinuación, seguir engrosando el css:

.menucuco .x2 {
background-image: url(http://lararala.com/t/address-book-new.png);
background-position: 2px center;
padding-top: 10px;
padding-bottom: 10px;
font-size: 15px;
}

Esto básicamente engrosa el relleno, aumenta la fuente y cambia la imagen por defecto de los iconos a una mayor.

Paso 4

Ya casi has acabado, solo te queda un pequeño detalle, hacer que los botones respondan al pasar el ratón sobre ellos, lo ideal seria desplazar el texto y el icono unos 2 pixeles a la derecha, dado que casi todas las medidas estan en unidades absolutas, es tan simple como agregar esto al css:

.menucuco a:hover {
background-color: #E9E9E9;
padding-left: 42px;
background-position: 12px center;
}
.menucuco .x2:hover {
background-position: 4px center;
}

El primer escaríbulo (¿Como se llaman realmente esas cosas?) define como quedarán los botones al pasar el ratón por encima gracias a la pseudoclase :hover, el segundo escaríbulo arregla el posicionado del fondo, ya que hubo que hacerlo distinto antes.

Paso 5

Ya solo queda un pequeño detalle, es que las imágenes son todas iguales, esto es tan simple de arreglar como un bonito class="cosa" y luego el css pertinente:

.menucuco .cosa {
background-image: url(http://lararala.com/t/edit-redo.png);
}

Pero, claro, los botones grandes ya tienen una clase (x2), ¿como se soluciona eso?, muy sencillo, añadiendo la otra clase separada por un espacio, tal que asi <a href="#" class="x2 bu">, el css no varia del 1er ejemplo.

Si quieres verlo en vivo, mira el ejemplo acabado.