Como están?
Bueno estoy pasando por un problema con la botonera.
me he bloqueado dentro de mi posibilidad siendo un novato...
quiero lograr esta botonera
Tengo la intención de utilizar imagenes para no tener que hacer el llamado a la fuente especifica para evitar problemas de compatibilidad con algunos navegadores.
el problema que tengo es que no se como hacer para que cuando pase por encima de la imagen esta cambie. Pero que a la vez sea un link, ya que si lo pongo como background-image en el CSS del div no logro hacer que pueda configurar el link...
Además quiero utilizar imagenes porque con esto logro que la linea roja si se fijan llega justo hasta donde empieza la que está abajo cuando hice el link con texto logre que cambiara la linea roja de abajo a arriba pero no ocupaba todo el espacio solo lo que ocupaban las letras.
Por favor si pueden darme una mano les agradecería.
Saludos!
EDIT: He conseguido hacer que las imagenes cambien de la siguiente manera pero no consigo poner más botones, necesito saber como poner más a la derecha.
Código:
/*BOTONERA*/
#botonera{
width:65%;
height:35px;
margin-left:10px;
/*font-family:BebasNeue;
font-size:36px;*/
}
.inicio a {
outline: none;
text-indent: -5000px ;
display:block;
width:76px;
height:39px;
background: url("imgs/botonera/iniciodoble.jpg") 0 0 no-repeat;
}
.inicio a:hover {
background-position: -76px 0;
}
.inicio a:active {
background-position: -76px 0;
}
/*FIN BOTONERA*/
Código HTML:
<div id="botonera">
<div class="inicio">
<a href="/">INICIO</a>
</div>
</div>
EDIT 2: SOLUCIONADO!!!
En lugar de utilizar un DIV con la calse hice una tabla con cell padding 0 y cell spacing en 0 y la clase se la pongo en cada TD y lislto!!!
Gracias!!!