Bottoni e pulsanti Web più belli con i CSS3

5 marzo 2012

C’è un ambito nel design delle interfacce per il web che si dimostra ideale per l’applicazione delle proprietà più interessanti dei CSS3: la realizzazione di bottoni. Grazie a queste proprietà possiamo dire davvero addio alle tecniche tradizionali, quelle che per la creazione di pulsanti esteticamente accattivanti o realistici ricorrevano necessariamente all’utilizzo di immagini.

Il nostro punto di partenza sarà questo, un semplice elemento button privo di qualunque formattazione: (esempio 1):

Figura 1 – Un bottone senza formattazione

screenshot
<button id="pulsante">Push me!</button>

Dopo aver ricordato che come base per il pulsante avremmo potuto usare anche elementi come a o input, possiamo procedere.

Stili di base

Prima di applicare le proprietà CSS3, prepariamo il terreno creando una serie di regole di stile di base. È un passaggio importante, anche perché andiamo di fatto a definire l’aspetto del bottone su quei browser che non supportano le proprietà CSS3 che useremo di qui a poco. Ecco il codice:

#pulsante {
 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;
}

Con outline: none rimuoviamo il contorno (tipicamente una linea tratteggiata) associato ai link e ai pulsanti quando sono attivi. Impostiamo il cursore perché assuma la tipica forma della manina (pointer) quando passiamo con il mouse sul bottone.

Centriamo il testo, rimuoviamo da esso qualunque tipo di decorazione, definiamo le proprietà di base per font e colore, aggiungiamo del padding e un sottile bordo, concludendo con la dichiarazione con cui settiamo il colore di sfondo.

Il risultato (esempio 2) è visibile in anteprima nello screenshot qui sotto:

Figura 2 – Formattazione di base

screenshot

Se vuoi aggiornamenti su Bottoni e pulsanti Web più belli con i CSS3 inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Bottoni e pulsanti Web più belli con i CSS3

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy