CSS tutorial: Realizzare pulsanti e bottoni.

In questo tututorial vedrai come sia possibile creare pulsanti e bottoni utilizzando semplicemente tag HTML e proprietà CSS in maniera semplice ed intuitiva.

Demo Download

Il bottone realizzato in questo tutorial sfrutta alcune pseudoclassi CSS come :hover e :active per definirne l’aspetto nei suoi diversi stati, inoltre userà la proprietà CSS box-shadow per definire l’ombra che il bottone avrà al suo interno quando premuto, border-radius per definire la forma arrotondata degli angoli e linear-gradient per definire la sfumatura di colori.

la struttura HTML

Per realizzare dei bottoni si può tranquillamente partire da un semplice tag a HTML, quindi una struttura come questa sotto sarà perfetta:

<a href="#">Testo del Bottone</a>

partendo da questa semplice struttura ho aggiunto delle classi per modificarne l’aspetto in maniera modulare, per esempio le tre classi button, grey e round ognuna di esse ha un compito preciso e influise sul bottone, le definisco modulari perchè ognuna indipendente dall’altra e facilmente intercabiabili.

<a href="#" class="button grey round">Testo del Bottone</a>

Ovviamente se adesso facessi una prova in un qualsiasi browser non cambierebbe nulla rispetto alla struttura di partenza questo perchè non hai ancora creato gli stili CSS relativi alle classi che abbiamo aggiunto.

Le regole CSS

Il secondo passaggio consiste nel creare un foglio di stile CSS e progettare delle classi da associare al tag HTML.

Sono partito dalla classe .button per indicare che il tag a dovrà assumere dimensioni di un bottone, quindi:

 .button { 
 	padding:10px 20px;
}

Ora possiamo passare alla definizione della classe .grey per assegnare il colore al bottone, per questa classe ho deciso di usare la proprietà linear-gradient che assegna una sfumatura tra due o più colori molto simile a quelle che si possono ottenere con i gradienti di Photoshop, purtroppo questa proprietà non è ancora riconosciuta come standard dal consorzio W3C, per questo saranno necessari numerosi vendor prefix per farla funzionare correttamente, ti consiglio perciò di usare il tool “Ultimate CSS gradient generator” per creare la sfumatura che più ti piace e usare il codice CSS generato

.grey { 
 	border:1px solid grey;
 
 	background: #f0f0f0; /* Old browsers */
 
    background: -moz-linear-gradient(top, #f0f0f0 0%, #d2d2d2 100%); /* FF3.6+ */
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#d2d2d2)); /*    Chrome,Safari4+ */
 
    background: -webkit-linear-gradient(top, #f0f0f0 0%,#d2d2d2 100%); /* Chrome10+,Safari5.1+ */
 
    background: -o-linear-gradient(top, #f0f0f0 0%,#d2d2d2 100%);/* Opera11.10+ */
 
    background: -ms-linear-gradient(top, #f0f0f0 0%,#d2d2d2 100%); /* IE10+ */
 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#d2d2d2',GradientType=0 ); /* IE6-9 */
 
    background: linear-gradient(top, #f0f0f0 0%,#d2d2d2 100%); /* W3C */
}

a questo punto sarà necessario creare una pseudoclasse :hover da associare alla classe .grey per specificare quale aspetto dovrà prendere il bottone una volta che il mouse navigherà sopra a quest’ultimo:

.grey:hover {
 	background: #cccccc; /* Old browsers */
 
    background: -moz-linear-gradient(top, #cccccc 0%, #eeeeee 100%); /* FF3.6+ */
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
 
    background: -webkit-linear-gradient(top, #cccccc 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
 
    background: -o-linear-gradient(top, #cccccc 0%,#eeeeee 100%); /* Opera11.10+ */
 
    background: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 100%); /* IE10+ */
 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc',endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
 
    background: linear-gradient(top, #cccccc 0%,#eeeeee 100%); /* W3C */
}

Per ultima ho creato una classe di nome .round in cui specificare la forma del bottone, in questo caso ho usato la proprietà border-radius per assegnare bordi arrotondati al bottone:

.round {
    -webkit-border-radius: 20px;
 
    -moz-border-radius: 20px; 
 
    border-radius: 20px;
}

Per terminare il tutorial ho inserito una pseudo classe :active alla classe .button per specificare l’aspetto del bottone quando premuto dal mouse, in questo caso ho usato la proprietà box-shadow con valore inset per assegnare un’ombra interna al bottone che simuli l’effetto pressione.

.button:active {	
    box-shadow:inset 2px 0 2px #333;
 
    -moz-box-shadow:inset 2px 0 2px #333;
 
    -webkit-box-shadow:inset 2px 0 2px #333;
}

Condividi questo articolo:

• Tweet

Info sull' autore:

Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di Francesco