E' semplice:
una regola CSS scritta così:
nometag.nomeclasse
Seleziona tutti i tag di tipo nometag che hanno nell'attributo class la classe "nomeclasse" (ah, tralaltro nell'attributo class si possono inserire più classi, così: class="classe1 classe2 classe3", e il tag apparterrà a tutte e tre), e fin qui penso ti fosse già chiaro.
una regola scritta così:
nometag1.nomeclasse1 nometag2.nomeclasse2
seleziona invece tutti i tag di tipo nometag2 che hanno classe nomeclasse2 che sono contenuti in tag di tipo nometag1 che abbiano classe nomeclasse1; il che significa che se tu scrivi prima
input.miobottone {}
vai a selezionate tutti i tag input che abbiano classe miobottone, mentre se poi aggiungi anche
body.attivabottoni input.miobottone {}
dici che SE body ha classe attivabottoni allora gli input che hanno classe miobottone devono recepire ANCHE gli attributi che inserisci lì dentro, oltre a quelli che avevi inserito nella precedente regola.
Questo naturalmente è quello che serve a cambiare TUTTI i bottoni che hanno classe miobottone solo aggiungendo una classe al body, evitando di dover usare un ciclo js che vada a cambiare la classe di ognuno dei bottoni uno per uno.
Del tutto diverso è su vuoi cambiare l'aspetto del solo bottone su cui viene fatto click: in questo caso, basta che metti
onclick="this.class=this.class+' diverso';"
e poi definisci in
input.diverso {}
le caratteristiche in cui è diverso il bottone cliccato.
Tutto questo discroso NATURALMENTE vale solo se non viene ricaricata la pagina: se il tuo bottone su cui si clicca è un submit, allora la pagina viene ricaricata/ ne viene caricata un'altra, e NON C'E' NESSUN MODO se non usando linguaggi lato server di fare si che quel click provochi un cambiamento nella pagina di destinazione della form.