Y asi para todos nuestros botones, después vamos a tener que hacer uso del CSS, iniciamos con este código: Código:
#bot1 {
border: 0 0 0 0; padding: 0;
text-align: center;
}
Donde le decimos que no queremos margen exterior e interior, alineamos el texto al centro, ahora seguimos con este código: Código:
#bot1 a{ background-image:url(bg_menu_1.jpg); background-position: center top; height:30px; width:100px; display: block; color: #990000;
text-decoration: none; padding-top: 5px; background-repeat: no-repeat;
font-weight: bold;
}
Que prácticamente es el que hace todo, veamos línea por línea
background-image:url(bg_menu_1.jpg);
Con esto decimos que queremos una imagen de fondo y damos la ruta de esta
background-position: center top;
Con esto estamos indicando que la posición de la imagen de fondo estará centrada y hacia arriba.
background-repeat: no-repeat;
Para que no repita el fondo como si se tratase de un patrón.
height:30px;
width:100;
Le decimos que la altura será de 30 y ancho de 100px que son las dimensiones de nuestras imágenes de fondo.
display:block;
Para que nos genere y respete un recuadro con las medidas que pusimos antes.
color:#990000
Con esto solo le estamos dando un color al texto que se encuentre dentro de nuestra caja.
text-decoration:none;
Es para evitar la linea que esta debajo de los links.
padding-top:5px;
Para que me guarde un espacio de 5px en l aparte superior de nuestro link y con esto baja la posición al centro de nuestro recuadro.
font-weight: bold;
Hace que las letras estén en negrita
Después solo habrá que agregar clases para los pseudos elementos “hover” y “focus”
