Come creare un bottone dagli angoli arrotondati con CSS3
Articolo pubblicato il 08-12-2009. 
Categorie: CSS, jQuery, PHP e.., Tutorial testuali. 
Commenti: 11.
Nella guida di oggi, voglio mostrarvi come creare un efficace bottone in stile web 2.0 dagli angoli arrotondati, utilizzando solamente CSS3. Naturalmente sarà compatibile solo con i browser che supportano questo linguaggio, e per ora vale a dire, Safari e Firefox. Potete vedere una demo del bottone cliccando qui e scaricarlo, invece, da qui.
Andiamo, ora, a vedere il codice CSS:
body{ margin: 0; } a.button{ /* Impostiamo la grandezza del nostro bottone. */ width: 200px; display: block; /* Scegliamo il colore di sfondo. */ background-color: #388fc5; /* Utilizziamo la proprietà CSS3 per arrotondare il bottone. */ -moz-border-radius: 15px; -webkit-border-radius: 15px; /* Utilizziamo la proprietà CSS3 per aggiungere un'ombra al bottone. */ -moz-box-shadow: 1px 1px 0 #145278; -webkit-box-shadow: 1px 1px 0 #145278; /* Impostiamo un bordo chiaro al bottone. */ border: 1px solid #9fdaff; /* Impostiamo il cursore come "manina" */ cursor: pointer; /* Aggiungiamo dei margini interni ed esterni */ padding: 10px; margin: 30px; /* Formattiamo il testo */ font-size: 1.7em; font-family: Myriad Pro, Tahoma, Sans-serif; font-weight: bold; color: #ffffff; text-shadow: 0 1px 0 #363636; line-height: 45px; text-align: center; text-decoration: none; } a.button:hover{ background-color: #45a2dc; } a.button:active{ background-color: #2a7aab; }
Il codice, commentato, mi sembra piuttosto semplice da capire; i selettori che ci interessano maggiormente sono -moz-border-radius, -webkit-border-radius (entrambi per la realizzazione dell’effetto arrotondato) e -moz-box-shadow per creare l’effetto rilievo con il bordo interno.
Ecco, quindi, come si presenterà il nostro codice:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Bottone in stile web 2.0 full CSS3</title> <style type="text/css"> body{ margin: 0; } a.button{ /* Impostiamo la grandezza del nostro bottone. */ width: 200px; display: block; /* Scegliamo il colore di sfondo. */ background-color: #388fc5; /* Utilizziamo la proprietà CSS3 per arrotondare il bottone. */ -moz-border-radius: 15px; -webkit-border-radius: 15px; /* Utilizziamo la proprietà CSS3 per aggiungere un'ombra al bottone. */ -moz-box-shadow: 1px 1px 0 #145278; -webkit-box-shadow: 1px 1px 0 #145278; /* Impostiamo un bordo chiaro al bottone. */ border: 1px solid #9fdaff; /* Impostiamo il cursore come "manina" */ cursor: pointer; /* Aggiungiamo dei margini interni ed esterni */ padding: 10px; margin: 30px; /* Formattiamo il testo */ font-size: 1.7em; font-family: Myriad Pro, Tahoma, Sans-serif; font-weight: bold; color: #ffffff; text-shadow: 0 1px 0 #363636; line-height: 45px; text-align: center; text-decoration: none; } a.button:hover{ background-color: #45a2dc; } a.button:active{ background-color: #2a7aab; } </style> </head> <body> <div> <a class="button" href="http://www.artedelweb.it/wp-content/uploads/2009/12/bottone_full_css.zip"> Download </a> <a class="button" href="http://www.artedelweb.it/2009/12/08/guida-creiamo-un-bottone-dagli-angoli-arrotondati-e-in-stile-web-2-0-con-css3/"> Go to article </a> </div> </body> </html>
Per qualsiasi dubbio o domanda, potete scriverci nei commenti 
11 commenti
Kharg
dicembre 9th, 2009
Un vero peccato che funzioni solo con Firefox e Safari :'(
P.S: i Login (Facebook, Twitter OpenID) non funzionano -_-
Rispondi
Artedelweb
dicembre 9th, 2009
Sei sicuro? A me funziona :S Forse stanno facendo della manutenzione..
Rispondi
risorsa
gennaio 11th, 2010
Come al solito ie rimane indietro , non capisco come mai ancora è cosi diffuso
Comunque un ottimo articolo spiegato benissimo , appena trovo tempo ne approfitto per rifare gran parte dei pulsanti al posto delle classiche immagini in png
Rispondi
Artedelweb
gennaio 11th, 2010
Grazie mille
Purtroppo IE è la pecca del web :\\
Rispondi
Antonio G.
settembre 1st, 2011
Ai tempi di Narscape 2 o 3 con IE c’era rivalita poi Mozilla, prima, e Firefox, dopo, è diventato il browsere di riferimento per la massa dei navigatori.
Attenti a Google Chrome e Safari, altrettanto veloci nell’eseguire una pagina anche al primo accesso in un nuovo sito, anche con pagine pesanti o lunghe.
Rispondi
Antonio G.
settembre 1st, 2011
Netscape ops!
Carlo
ottobre 21st, 2010
Sperando che questo commento sia ancora leggibile (visto che l’articolo e’ del 2009)…..e ringraziando per la conoscenza di questo nuovo bottone, vado a chiedere ulteriori aiuti
:
parto da un programma chiamante in PHP che dice quando segue:
if ($POST['nominativo'] == ‘Mario’)
$sql = “SELECT * FROM nominativi ….. WHERE nome = $nominativo
ora, inserendo questo bottone in una pagina HTML con la scitta MARIO (anzichè download), vorrei che cliccandoci sopra, mi trasmetta alla pagina chiamante PHP il nome MARIO. Pressapoco il comando dovrebbe essere simile a questo:
.. name=”nominativo value=”Mario”
MA IN QUESTO CASO NON FUNZIONA.. qualcuno sa aiutarmi? GRAZIEEEE
Rispondi
Carlo
ottobre 21st, 2010
OPS: si e’ mangiato una parte di codice….
..form action=”shop.php” method=”POST”>
…button name=”nominativo” value=”mario” type=”submit”
Rispondi
Antonio G.
settembre 1st, 2011
Io uso Firefox 6.0 e funziona bene e l’attributo -moz-border-radius come tutti gli altri prefissati -moz- sono stato implementato proprio da Mozilla e quindi è impossibile che non funzioni nei suoi browsers.
Rispondi
Antonio G.
settembre 1st, 2011
Vorrei anche io essere un CSSmane come te Artedelweb!
Complimenti vivissimi.
Un commento: io la sezione seguente del CSS
a.button:active{
background-color: #2a7aab;
}
la lascerei solo a scopo didattico.
Rispondi
evolution
gennaio 15th, 2012
Molto belli come bottoni, ho creato una cosa molto simile qui: http://explosivelab.blogspot.com/2012/01/css3-button-tutorial-con-box-shadow.html
Rispondi