Creo que es una buena solucion, me ha funcionado a la perfeccion.
Os dejo aqui el cambio en el css para obtener la apariencia de un boton normal.
Código:
/* Como cada navegador dibuja el boton por defecto de una
manera diferente les podemos dar a todos los botones estas
reglas de estilo para que sean iguales que el boton que se
mantiene pulsado y hace las veces de un checkbox, conocido
tambien como un boton toggle*/
.button{
background: #dadada;
font-size: 10pt;
border-radius: 5px;
/* padding-left: 3px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;*/
}
/* Aqui los estilos para el boton toggle on y off */
.off{
background: #dadada;
font-size: 10pt;
/*border:2px outset #c6c6c6;*/
border-bottom:2px solid #606060;
border-right:2px solid #606060 ;
border-top:2px solid #eee ;
border-left:2px solid #eee ;
border-radius: 5px;
/* padding-left: 2px;
padding-top: 2px;
padding-right: 3px;
padding-bottom: 3px;*/
}
.on{
background: #cdcdcd;
font-size: 10pt;
/*width: 45px;
height: 25px;
border:2px inset #c6c6c6;*/
border-bottom:2px solid #eee;
border-right:2px solid #eee;
border-top:2px solid #606060;
border-left:2px solid #606060;
border-radius: 5px;
/* padding-left: 3px;
padding-top: 3px;
padding-right: 2px;
padding-bottom: 2px;*/
}
Debido a la diferencia entre navegadores no he podido aplicar las reglas padding que hacen que el texto parezca hundido. Por lo demas funciona a la perfeccion.
Recordad que despues para saber en javascript si esta pulsado o no basta con consultar la propiedad className.
Código:
if (document.getElementById('btn').className == "on"){