Brainleaf
Web Resources

In questo secondo tutorial, ho realizzato 5 tipi di web buttons servendomi solo del CSS, niente immagini quindi! Tutto ciò che dovrete fare è copiare il codice da me realizzato nel vostro foglio di stile e, se vi occorre, cambiare i vari parametri, come il font, i colori ecc. Ecco un esempio concreto dei bottoni e sotto  il relativo stamp.

Tutorial CSS Buttons

Bottone 01 | CSS

/* CSS BOTTONE 01 - CSS BUTTON 01 */ 
.button01 { 
  background-color: #f0f0f0; 
  font-family: arial; 
  color: #898989; 
  font-size: 12px; 
  font-weight: bold; 
  text-decoration: none; 
  border: 1px solid #d8d8d8; 
  text-shadow: 1px 1px 0px #ffffff; 
  padding-top: 7px; 
  padding-right: 26px; 
  padding-bottom: 7px; 
  padding-left: 26px; 
  display: inline-block; 
  /* Angoli arrotondati - Rounded corner */ 
  -moz-border-radius: 18px; 
  -webkit-border-radius: 18px; 
  border-radius: 18px; 
  /* Ombra interna ed esterna - Inner and outer shadow */ 
  box-shadow: inset 0px 1px 0px 0px #ffffff, 0px 2px 3px #dcdcdc; 
  -moz-box-shadow: inset 0px 1px 0px 0px #ffffff, 0px 2px 3px #dcdcdc; 
  -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff, 0px 2px 3px #dcdcdc; 
  /* Gradiente - Gradient */ 
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.07, #f0f0f0), color-stop(1, #e5e5e5) ); background: -moz-linear-gradient( center top, #f0f0f0 7%, #e5e5e5 100% ); 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#e5e5e5'); } 
  .button01:hover { background-color: #e5e5e5; color: #FF6699; 
  /* Gradiente - Gradient */ 
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.07, #e5e5e5), color-stop(1, #f0f0f0) ); 
  background: -moz-linear-gradient( center top, #e5e5e5 7%, #f0f0f0 100% ); 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#f0f0f0'); 
  }

Bottone 02 | CSS


Bottone 03 | CSS


Bottone 04 | CSS


Bottone 05 | CSS

Joomla SEF URLs by Artio