Bottone CSS3

In questo articolo vedremo come realizzare un bottone utilizzando i gradienti e gli angoli arrotondati CSS3. Forniremo anche delle utili risorse per lo studio dei gradienti così da poterli utilizzare in modo cross-browser.

Si tratta di un semplice link trasformato in un elemento di blocco a cui sono stati applicati i seguenti stili:

#go {
	width: 300px;
	height: 80px;
	background: #c40;
	background: -webkit-gradient(linear, left top, left bottom, from(#f90), to(#c40));
	background: -moz-linear-gradient(top, #f90, #c40);
	background: -o-linear-gradient(top, #f90, #c40);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9900', endColorstr='#cc4400');
	color: #fff;
	font-weight: bold;
	margin: -40px 0 0 -150px;
	text-decoration: none;
	text-align: center;
	border-radius: 10px;
	font-family: Arial, sans-serif;
	display: block;
	border: 3px solid #a40;
	font-size: 2em;
	line-height: 80px;
	position: absolute;
	top: 25%;
	left: 50%;
}

#go:hover {
    background: #f90;
	background: -webkit-gradient(linear, left top, left bottom, from(#c40), to(#f90));
	background: -moz-linear-gradient(top, #c40, #f90);
	background: -o-linear-gradient(top, #c40, #f90);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc4400', endColorstr='#ff9900');
}

Quando si utilizzano i gradienti CSS3, la prima dichiarazione da utilizzare deve includere un valore di ripiego nel caso in cui i gradienti non fossero supportati. In questo caso la proprietà utilizzata è background, quindi la prima dichiarazione che la utilizza deve contenere un valore di ripiego.

Risorse sui gradienti CSS3

1. -moz-linear-gradient (Firefox)
2. -webkit-gradient (Chrome, Safari)
3. -o-linear-gradient (Opera)
4. filter (Internet Explorer)

Potete visionare l'esempio finale in questa pagina.