TheJoe.it Into the (open) source

14dic/130

Bottoni usando solo i CSS

css-codice

Nell'articolo di oggi vediamo come trasformare una semplice form, con un bottone non formattato in un'altrettanto semplice form con un bottone formattato. Tutti i colori, i gradienti e le ombreggiature saranno "costruite" usando le regole CSS relative alla versione 3. Queste poche regolette sono da prendere un po' con le pinze, perché funzionano perfettamente con i browser basati su Webkit (Safari, Konquerror, iPad/iPhone) e Gecko (Firefox e simili), ma sono inutili su tutte le versioni di Internet Explorer precedenti alla 9.

Iniziamo con l'HTML. Collegheremo anche il file "style.css":

<html>
<head>
  <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
  <form action="#">
    <table>
      <tr>
        <td>Nome:</td><td><input type="text" name="name" value=""></td>
      </tr>
      <tr>
        <td>Mail:</td><td><input type="text" name="mail" value=""></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><button id="pulsante">Invia</button></td>
      </tr>
    </table>
  </form><!--end form-->
</body>
</html>

Senza la formattazione data dal CSS questo sarebbe il risultato "nudo e crudo".

form_non_formattata

1. Stile iniziale

Iniziamo a inserire all'interno del nostro "style.css" le seguenti righe di codice per dare stile al bottone:

button{
  width: 100px;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: bold 12px Arial, Helvetica, sans-serif;
  color: #fff;
  padding: 10px 20px;
  border: solid 1px #0076a3;
  background: #0095cd;
}

Intanto diamo una dimensione fissa, allineamo il testo al centro senza decorazioni, ne impostiamo il font (font), il colore (color) e le distanze dagli altri elementi (padding). Impostiamo poi il colore di sfondo del bottone e il colore del bordo. Questo è il risultato:

1

2. Gradiente sullo sfondo

Potremmo poi aggiungere una sfumatura al colore di sfondo, per dargli una tridimensionalità. Aggiungiamo le seguenti righe all'elemento "button" del nostro "style.css":

background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -webkit-linear-gradient(top,  #00adee,  #0078a5);
background: -moz-linear-gradient(top,  #00adee,  #0078a5);
background: -ms-linear-gradient(top,  #00adee,  #0078a5);
background: -o-linear-gradient(top,  #00adee,  #0078a5);

Di queste righe c'è poco da spiegare, aggiungono un gradiente verticale allo sfondo. Questo è il risultato:

2

3. Arrotondare gli angoli

A seconda delle preferenze potremmo voler arrotondare gli angoli del bottone. Aggiungiamo le seguenti righe all'elemento "button" del nostro "style.css":

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

Può essere utile capire il funzionamento di questi valori. Bisogna giocarci un po' per trovare il risultato voluto. Di seguito il risultato:

3

4. Ombre

Per conferire il tocco finale di tridimensionalità è necessario dare una leggera ombreggiatura. Aggiungiamo queste ultime righe all'elemento "button" del nostro "style.css":

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);

Questo è il risultato:

4

Ed ora che abbiamo un bottone con stile non resta che impostare le classiche azioni al passaggio del mouse e al click. Di seguito le righe da aggiungere al file "style.css":

button:hover {
  background: #0095cd;
  background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
  background: -webkit-linear-gradient(top,  #0078a5,  #00adee);
  background: -moz-linear-gradient(top,  #0078a5,  #00adee);
  background: -ms-linear-gradient(top,  #0078a5,  #00adee);
  background: -o-linear-gradient(top,  #0078a5,  #00adee);
  background: linear-gradient(top,  #0078a5,  #00adee);
}

button:active{
  position: relative;
  top: 1px;
}

E questo è il risultato funzionante:

About

Mantengo questo blog a livello amatoriale dal 2009. Sono appassionato di grafica, tecnologia, software Open Source. Fra i miei articoli non sarà difficile trovarne circa la musica, ed alcuni di riflessioni personali, ma preferisco indirizzare la linea del blog principalmente verso la tecnologia. Per informazioni contattami.