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
- -moz-linear-gradient (Firefox)
- -webkit-gradient (Chrome, Safari)
- -o-linear-gradient (Opera)
- filter (Internet Explorer)
Potete visionare l'esempio finale in questa pagina.