Cookie

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.

Commenti (0) Trackback (0)

Ancora nessun commento.


Leave a comment

Ancora nessun trackback.