Pulsanti sfumati in CSS senza usare immagini

<button class="button orangeButt">Dettagli</button>

.button {
    	display: inline-block; /* opzionale */
    	outline: none;
    	cursor: pointer; /* impostiamo che il cursore diventi mano quando si va sopra il tasto */
    	text-align: center; /* allineiamo il testo al centro */
    	text-decoration: none;  /* senza decorazioni perchè non ci piace :P */
    	font: 14px/100% Arial, Helvetica, sans-serif;  /* definiamo il font */
    	padding: .5em 2em .55em;  /* un pò di padding */
    	text-shadow: 0 1px 1px rgba(0,0,0,.3);  /* attributo css3 per dare un pò di ombra al testo; la "a" di rgba sta per "alfa" con il quale si imposta il livello di trasparenza */
    	-webkit-border-radius: .5em;  /* i bordi impostati per i browser che utilizzano il webkit */
    	-moz-border-radius: .5em;  /* i bordi impostati per mozilla firefox */
    	border-radius: .5em;  /* per tutto il resto (su ie non funziona) */
    	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);  /* un pò di ombra per i browser webkit */
    	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);  /* la stessa ombra su firefox */
    	box-shadow: 0 1px 2px rgba(0,0,0,.2);  /* idem per gli altri browser (tranne IE) */
    }

.orangeButt {
    	color: white; /* il colore del testo */
    	border: solid 1px #da7c0c; /* il bordo del colore che vogliamo */
    	background: #f78d1d; /* un background di base */
    	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); /* Ecco la sfumatura, che parte da "left top" e arriva a "left bottom" "from" il colore "to" l'altro colore  */
    	background: -moz-linear-gradient(top,  #faa51a,  #f47a20); /* stessa cosa per firefox */
    	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); /* questo codice invece funziona per explorer, anche se richiede il lancio di un ActiveX che di default è settato a true sui IE, ma che potrebbe richiedere la conferma da parte dell'utente */
    }
 
/* poi definiamo il css quando si passa sopra il tasto con il mouse */
.orangeButt:hover {
		background: #faa51a; /* colore più scuro */
		background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f06015));
		background: -moz-linear-gradient(top,  #faa51a,  #f06015);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f06015');
	}
/* infine definiamo il css per quando si clicca il tasto */
.orangeButt:active {
		color: #faa51a;
		padding-top:1px;
		background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
		background: -moz-linear-gradient(top,  #ffffff,  #cccccc);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffffff', endColorstr='#cccccc');
	}