Realmente no estoy seguro si eso puede lograrse sólo con CSS (la verdad no se me ocurre como) pero sí con JavaScript (más precisamente, jQuery).
Para esto es necesario definir clases. Algo como:
Código CSS:
Ver original.activo{
background-image:url(imagen-de-activo.jpg);
}
Con jQuery uno puede fácilmente agregar y quitar clases a elementos al dispararse diferentes eventos o lo que sea.
Te recomiendo que fusiones tus imágenes (como yo he hecho) pues si usas una imagen diferente para :hover, digamos, ésta recién cargará al momento de pasar el mouse por encima. Esto es algo indeseado, pues uno verá el botón pero al pasar el mouse por encima va a notarse la carga de la otra imagen.
El método que yo terminé adoptando es crear una imagen con los 3 (o dos) estados que tenga mi botón. Cada estado tiene exactamente las mismas dimensiones (fijate en la imagen de arriba) y con CSS puedo re-posicionar el fondo para :hover y :active. De esta forma sólo se carga una sola imagen y el efecto es prolijo.
Te voy a pasar un ejemplo bien sintetizado de cómo lograrías eso que querés hacer con jQuery, pero dame unos minutos :P (tenés suerte que estoy aburrido).