CSS: bottone in stile iTunes

  • CSS
  • Gabriele Romanato

Con le nuove proprietà CSS3 tutti i designer hanno a loro disposizione un arsenale davvero notevole per poter realizzare effetti in precedenza ottenibili solo con le immagini. In questo articolo vedremo come ottenere un bottone in stile iTunes.

Useremo un classico bottone HTML:


<button class="download-itunes">Download</button>​

A cui applicheremo i seguenti stili:


button.download-itunes {
  background-color: #52a8e8;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #52a8e8), color-stop(100%, #377ad0));
  background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0);
  background-image: -moz-linear-gradient(top, #52a8e8, #377ad0);
  background-image: -ms-linear-gradient(top, #52a8e8, #377ad0);
  background-image: -o-linear-gradient(top, #52a8e8, #377ad0);
  background-image: linear-gradient(top, #52a8e8, #377ad0);
  border-top: 1px solid #4081af;
  border-right: 1px solid #2e69a3;
  border-bottom: 1px solid #20559a;
  border-left: 1px solid #2e69a3;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  color: #fff;
  font: normal 11px "lucida grande", sans-serif;
  line-height: 1;
  padding: 3px 5px;
  text-align: center;
  text-shadow: 0 -1px 1px #3275bc;
  width: 112px;
  -webkit-background-clip: padding-box; }
  
  
  button.download-itunes:hover {
    background-color: #3e9ee5;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9ee5), color-stop(100%, #206bcb));
    background-image: -webkit-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
    background-image: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
    background-image: -ms-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
    background-image: -o-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
    background-image: linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
    border-top: 1px solid #2a73a6;
    border-right: 1px solid #165899;
    border-bottom: 1px solid #07428f;
    border-left: 1px solid #165899;
    -webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
    -moz-box-shadow: inset 0 1px 0 0 #62b1e9;
    box-shadow: inset 0 1px 0 0 #62b1e9;
    cursor: pointer;
    text-shadow: 0 -1px 1px #1d62ab;
    -webkit-background-clip: padding-box; }

  button.download-itunes:active {
    background: #3282d3;
    border: 1px solid #154c8c;
    border-bottom: 1px solid #0e408e;
    -webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
    -moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
    box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
    text-shadow: 0 -1px 1px #2361a4;
    -webkit-background-clip: padding-box; }

button[disabled].download-itunes,
button[disabled].download-itunes:hover,
button[disabled].download-itunes:active {
  background-color: #dadada;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dadada), color-stop(100%, #f3f3f3));
  background-image: -webkit-linear-gradient(top, #dadada, #f3f3f3);
  background-image: -moz-linear-gradient(top, #dadada, #f3f3f3);
  background-image: -ms-linear-gradient(top, #dadada, #f3f3f3);
  background-image: -o-linear-gradient(top, #dadada, #f3f3f3);
  background-image: linear-gradient(top, #dadada, #f3f3f3);
  border-top: 1px solid #c5c5c5;
  border-right: 1px solid #cecece;
  border-bottom: 1px solid #d9d9d9;
  border-left: 1px solid #cecece;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #8f8f8f;
  cursor: not-allowed;
  text-shadow: 0 -1px 1px #ebebeb; }

button.download-itunes::-moz-focus-inner {
  border: 0;
  padding: 0; }

L'effetto finale è stato ottenuto con un sapiente uso di gradienti, sfumature, ombreggiature e bordi. Quello che è importante ricordare è che quando si usano i prefissi dei browser con le proprietà CSS3 occorre sempre specificare la proprietà CSS3 standard per ultima, in modo che qualora il browser la supporti sia costretto dalla cascata a utilizzare quella e non la sua versione proprietaria.

​

Potete visionare l'esempio finale in questa pagina.

Torna su