Si lo que deseamos es obtener un resultado profesional en la elaboración de los botones de nuestra página web, tendremos que tener en cuenta que la mejor opción para realizarlos es mediante hojas de estilos, ya que a diferencia de flash, otorga una forma bastante ligera y profesional de realizar nuestro diseño teniendo una muy buena compatibilidad entre los navegadores que posean el estándar, para realizar nuestro botón, necesitaremos 3 imágenes distintas, una donde se muestre el botón en sí, otra donde se muestre el botón cuando el cursor esté encima de él y finalmente, una imagen del botón cuando ha sido presionado, el lugar donde el botón aparecerá será donde se ponga el código siguiente:
<span id=”boton”>
<a href=”#2”>INICIO</a>
</span>
Para aplicarle el diseño al botón, será necesario aplicar el siguiente código CSS, donde se indica que no deseamos que existan márgenes exteriores ni interiores, además de alinear el texto al centro.
# boton {
border: 0 0 0 0;
padding: 0;
text-align: center;
}
A continuación se presenta el resto del código, que se explicará posteriormente:
#bot1 a{
background-image:url(boton.jpg);
background-position: center top;
height:25px;
width:80px;
display: block;
color: #CE1522;
text-decoration: none;
background-repeat: no-repeat;
}
background-image:url: Especificamos que se utilizará una imagen de fondo, además de indicar la ruta de la misma
background-position: Define la posición de la imagen, en este ejemplo estará situada en el centro y hacia arriba.
background-repeat: Se especifica que el fondo no se repetirá, puesto que la imagen se mostrará únicamente una vez
height y width: Se define la altura y anchura de nuestro botón por medio de pixeles.
display:block: Mostrará un recuadro con las medidas seleccionadas
text-decoration:none: Evita que se muestre una línea de link debajo del botón resultante.
Habiendo aplicado el código anterior, lo único que hará falta será indicar cuáles son las otras dos imágenes a tomar en cuenta para realizar nuestro diseño, para realizarlo, se podrá usar el siguiente código:
#boton a:hover{
background-image:url(boton2.jpg);
}
#bot1 a:focus{
background-image:url(boton3.jpg);
}
Mediante el uso de hover y focus le indicamos al navegador qué imágenes tomar para mostrar adecuadamente los botones en la pagina web de una forma adecuada.