Herencia con CSS

[Tarzan]

Buenas a todos/as

Tengo una clase botón en un archivo CSS y necesito que herede todas sus características pero NO el hover.
Pongo un ejemplo:

Este es mi código del CSS:

.boton{
padding: 3px;
background-image: url(../BtnOff/BtnEmpresa.gif);
background-repeat:no-repeat;
width:99px;
height:25px;
text-decoration:none;
}

.boton:hover{
padding: 3px;
background-image: url(../BtnOn/BtnEmpresaAct.gif);
background-repeat:no-repeat;
width:99px;
height:25px;
text-decoration:none;
}

Necesito una clase nueva con el mismo comportamiento pero con una imagen de fondo distinta:

.boton2{
background-image: url(../BtnOff/BtnCatalogo.gif);
}

.boton2:hover{
background-image: url(../BtnOn/BtnCatalogoAct.gif);
background-repeat:no-repeat;
width:99px;
height:25px;
text-decoration:none;
}

Si utilizo la clase boton desde el html no hay problema y todo funciona bien:
<a href="PantallaC.html" class="boton">&nbsp</a>

Pero cuando utilizo la clase boton2 y HEREDO de la clase boton, adquiere todas las características (lo cual lo veo perfecto) PERO también adquiere el comportamiento hover... No hace caso del hover del boton2 y eso no es lo que quiero.

<a href="PantallaC.html" class="boton boton2">&nbsp</a>

¿Alguien sabe como podría resolver esto sin tener que escribir las propiedades para uno y para otro?... Me gustaría usar la herencia del boton pero que el boton2 tenga el comportamiento hover del boton2:hover...

[AlvaroG]

Pues lo veo más simple así:

Código:

.boton, .boton2 {
padding: 3px;
background-repeat:no-repeat;
width:99px;
height:25px;
text-decoration:none;
}

.boton {
background-image: url(../BtnOff/BtnEmpresa.gif);
}

.boton2{
background-image: url(../BtnOff/BtnCatalogo.gif);
}

Y como antes los :hover especificados para cada una.

Luego simplemente ponés

Código:

<a href="PantallaC.html" class="boton2">&nbsp</a>

Saludos.

[Tarzan]

Muchísimas gracias Alvlin!!!


Eso era exactamente lo que buscaba!!


Un saludo.

[Mauro85]

También lo que yo estaba buscando, genial! Gracias Alvlin!