Effetto premuto

Salve a tutti, seguendo diverse guide ho dato il seguente stile al mio button

#button {
width: 4em;
padding: .2em;
color: #ffea01;
text-shadow: 1px 1px 1px #000;
border: solid thin #882d13;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
-webkit-box-shadow: 2px 2px 3px #999;
box-shadow: 2px 2px 2px #bbb;
background-color: #0070fb;
background-image: -webkit-gradient(linear, left top, left bottom,
 from(#e9ede8), to(#0070fb),color-stop(0.4, #0550ad));
}

Io vorrei che quando ci clicco sopra mi dia un effetto premuto, come faccio?

[acsocmel]

non sei molto chiaro, è un menu o un form o che?
potrebbe bastare

#button:active {
   ...
}

oppure vuoi qualcosa tipo il menù del mio sito?

è un input type=button di un form.

Il punto non è la #button:active ma cosa devo variare per far si che abbia l'effetto premuto, devo invertire le ombre?

[acsocmel]

protrebbe essere una soluzione
anche dargli una position: relative e un margin
dipende da te e dallo stile della pagina

[sevenjeak]

Potresti utilizzare la proprietà border-style valorizzata ad inset, creando cosi l'effetto di un pulsante premuto.

sono riuscito a risolvere il problema del tasto. Ora ne sorge un'altro. Il CSS che ho mostrato nel post iniziale mi viene letto correttamente solo Da Chrome e Safari mentre Opera e Mozilla me lo sfasano. Sapreste indicarmi una soluzione?

[karl94]

Cosa vuol dire che lo sfasano? Anzitutto vedo che hai definito l'ombreggiatura con due colori diversi: uno nella proprietà con il prefisso di WebKit e l'altro in quella senza. Inoltre anche lo sfondo usa la funzione per i gradienti specifica di WebKit.

Io non sono molto esperto in css, quel codice l'ho creato assemblato vari pezzi imparati dalle guide. Quando apro il sito con google Chrome il tasto si vede bene, quando lo apro con Opera o Firefox il css non funziona, si vede solo il colore di sfondo mentre l'effetto ombra non si vede. si vede un tasto piatto togliendomi l'effetto della dimensione. Mi sapreste indicare un modo per risolvere la cosa, magari con un altro codice css migliore?

[karl94]

Per quanto riguarda la proprietà box-shadow devi modificare in modo analogo a come è stato fatto per la proprietà border-radius, invece per quanto riguarda il gradiente è più complesso, in quanto la funzione implementata da WebKit usa una sintassi differente. Cerca qualche informazione in rete per scoprire come differiscono (assicurati che sia aggiornata, queste cose cambiano in fretta).

Ho letto da qualche parte che per uniformare il css e i tag html bisogna suare lo standard w3c, cosa mi sapete dire a tal proposito?

Per il gradient usa questo sito CSS3 Gradient, basta che inserisci i colori esadecimali, e lui ti crea il codice per tutti i browser più importanti.