Bottoni CSS3 arrotondati e con gradiente

[marco_c]

Ciao. Ho integrato in un sito web questi pulsanti fatti con CSS3. Hanno spigoli arrotondati e gradiente come colore di sfondo.

Ho notato con mia sorpresa che in IE9 lo sfondo non viene arrotondato, cioè dove ci sono gli spigoli arrotondati il colore di sfondo rimane rettangolare e quindi deborda. Lo posso accettare per i vecchi browser, ma anche per IE9?

Qualcuno sa se si può risolvere?

Riporto il codice del pulsante per chi non ha voglia di aprirsi il linnk

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

Grazie

[GI89]

So che internet explorer con i font non gestisce bene i px ed è meglio usare .em , ma questo è un problema che ho avuto di recente, se non ricordo male ho risolto cambiando l'unità di misura da em a %

prova così.

border-radius: 50%;

[marco_c]

no, il problema rimane.
Comunque ripeto il problema non sta nei bordi, i bordi vengono arrotondati correttamente, il problema sta nel colore di sfondo, è quello che deborda

[GI89]

In pratica ti arrotonda i bordi del pulsante ma non il colore di sfondo?
provato a "settare" insieme ai background? Fai una prova:

background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);

		-webkit-background-clip: padding;
	-moz-background-clip: padding;     
	background-clip: padding-box;
	-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

	outline: none;
	-webkit-transition: background-color 1s linear;
	-moz-transition: background-color 1s linear;
	-o-transition: background-color 1s linear;
	-ms-transition: background-color 1s linear;
	transition: background-color 1s linear;
}

[marco_c]

il tuo esempio funziona, ma solo perchè hai un unico colore di sfondo. Nel momento in cui introduco un gradiente non funziona più. Posto il codice completo di gradiente.

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px/100% Arial, Helvetica, sans-serif;
	padding: .3em 1em .35em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}

[GI89]

Ah ecco, effettivamente guardando il codice postato mi è passato di mente il gradiente (perdonami il gioco di parole).

Ma è possibile vedere l'esempio online??

[marco_c]

eccolo qui
è il demo legato al tutorial da cui sono partito. Se lo guardi con ie9 vedi subito il problema

[GI89]

Da quello che vedo basta eliminare lo sfondo ad esempio se il pulsante che vuoi è "button_black" vai in quella parte del codice e modifica da

.black {
	color: #d7d7d7;
	border: solid 1px #333;
background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
	background: -moz-linear-gradient(top,  #666,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
	background: -moz-linear-gradient(top,  #444,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}

a

.black {
	color: #d7d7d7;
	border: solid 1px #333;

	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {

	
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}

fammi sapere

[GI89]

Forse mi è sfuggito qualcosa mentre ti scrivevo il codice, ma per farti capire meglio vai sulla parte del css chiamata .white

.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background:

Noterai che è l'unico bottone dove non si vede il difetto perchè ha lo sfondo dello stesso colore della pagina, ci hai fatto caso?

[marco_c]

No il problema rimane.
Inoltre facendo così non funziona più per Chrome e Firefox ovviamente, perchè mi hai fatto togliere le direttive per loro due.