behavior: url(ie-css3.htc);

/* Alcune righe di codice di convenzione */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
/* Ci servirà per oscurare la pagina */
#nero{
/* Imposto il colore nero */
background-color:#000000;
/* Imposto come puntatore la manina */
cursor:pointer;
/* Imposto i valori di altezza e larghezza a 100% */
height:100%;
width:100%;
/* Ci servirà in modo tale che non ci siano margini */
left:0;
top:0;
/* Impostiamo come posizione la fissa */
position:fixed;
/* Aggiungiamo i codice per opacizzare lo sfondo. */
opacity: 0.65;
-moz-opacity: 0.65;
filter:alpha(opacity=65);
/* E' utile nel caso in cui ci siano altri oggetti in posizione assoluta o fissa */
z-index:1000;
/* Lo rendiamo non visibile */
display:none;
}
 
/* Questo sarà il nostro popup */
.messaggio{
/* Impostiamo il bianco come colore di sfondo e creiamo un piccolo bordo */
background-color:#FFFFFF;
border:3px solid #AAAAAA;
/* Impostiamo un leggero margine interno */
padding:5px;
/* Impostiamo la posizione come fissa. Ci servirà in modo tale che il popup segua lo scrolling della pagina */
position:fixed;
/* Impostiamo lo z-index come 1001. Lo z-index è una sorta di gestore di livelli. Chi avrà il numero maggiore si troverà davanti a chi ha numero minore. Facile no? */
z-index:1001;
/* Rendiamo il popup non visibile */
display: none;
/* Impostiamo la grandezza del box. Ci servirà in quanto così possiamo facilmente impostare il box centrato nella pagina */
width: 350px;
height: 350px;
/* Impostiamo i valori di top e left a 50% */
left: 50%;
top: 50%;
/* Il margin left e top dovrà essere pari alla metà delle dimensioni del box. Ci servirà per centrare il box */
margin-left: -175px;
margin-top: -175px;
text-align:center;
/* Impostiamo un'ombra con CSS3 */
-webkit-box-shadow: 0px 0px 10px #525252;
-moz-box-shadow: 0px 0px 10px #525252;
}

<button id="cliccaqui" style="width: 100px; height: 50px;">
Clicca qui!
</button>
<div class="messaggio">
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures.</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>

$(document).ready(function () {
	//Al click dell'id "cliccaqui"..
	$("#cliccaqui").click(function(){
 
		//Apparirà il div messaggio. FadeIn cambia il display del div a cui si riferisce da none a block.
		$(".messaggio").fadeIn("slow");
		//Allora perchè non usarlo anche qua? Perchè fadeIn, annulla anche la trasparenza, quindi o chiamiamo prima un fadeIn e poi modifichiamo il valore di opacità, o andiamo a modificare "manualmente" il css del div.
		$("#nero").css("display", "block");
 
		//Al click del div nero (cioè tutto lo sfondo dietro il popup)
			$("#nero").click(function(){
				//Scompare l'effetto scuro e il messaggio
				$("#nero").css("display", "none");
				$(".messaggio").fadeOut("slow");
			});
	});
});

n
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>
 
<button id="cliccaqui" style="width: 100px; height: 50px;">
Clicca qui!
</button>
<div class="messaggio">
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures.</div>

<img id="chiudi" src="chiudi.gif" alt="Chiudi il popup" />

#chiudi{
cursor:pointer;
position:absolute;
right:0;
top:0;
width:34px;
}

$("#chiudi").click(function(){
				$("#nero").css("display", "none");
				$(".messaggio").fadeOut("slow");
			});

<div class="cat_container">
	<div class="cat_title">
	Categories
	</div>
	<div class="cat_list">
		<ul>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
			<li><a href="#">Ispirations</a></li>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
		</ul>
	</div>
</div>

body{
/* Opzionale */
background:transparent url(bg.jpg) repeat scroll 0 0;
 
/* Impostiamo il font che vogliamo utilizzare */
font-family: Tahoma, Sans-Serif;
}
.cat_container{
/* Questo ci servirà per gl'angoli arrotondati del box grigio */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
 
/* Questa è l'ombra esterna posizionata verso la fine del menu. RGBA presenta i 3 valori di Rosso, Verde e Blu e il canale Alpha per la trasparenza */
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
 
/* Impostiamo sfondo e la larghezza del menu */
background-color: #e9e9e9;
width: 250px;
 
/* Il padding ci servirà a far si che dopo le categorie ci sia un pò di spazio vuoto */
padding-bottom: 5px;
margin: 10px;
}
.cat_title{
/* Impostiamo, anche qui, gli angoli arrotondati */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
 
/* Creiamo un'altra ombra */
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
 
/* Utilizziamo il gradiente verde precedentemente creato con repeat-x in modo tale che si ripeta orizzontalmente */
background: transparent url(bg_cat_title.jpg) repeat-x scroll 0 0;
height: 50px;
 
/* Impostiamo il testo */
font-size: 16pt;
color: #fff;
 
/* Impostiamo l'ombra di 1px */
text-shadow: 0px 1px 0px #000;
 
/* Line-height ci serve per centrare verticalmente il testo */
line-height: 40px;
 
/* Mettiamo un pò di margine a sinistra in modo tale che la scritta sia ben posizionata */
padding-left: 10px;
 
/* Impostiamo come cursore la manina */
cursor: pointer;
}
.cat_list ul{
/* Eliminiamo il padding che di è default 50px */
padding: 0;
}
.cat_list li{
/* Utilizziamo come sfondo il divisore con effetto pixel popping, ripetuto orizzontalmente, e posizionato in basso */
background: transparent url(divisor.jpg) repeat-x scroll 0 bottom;
 
/* Eliminiamo i pallini a fianco ad ogni voce della lista */
list-style: none;
 
/* Aggiungiamo un padding per posizionare meglio orizzontalmente il testo */
padding-left: 20px;
 
/* Impostiamo un l'altezza di ogni categoria */
height: 25px;
 
/* Formattiamo il testo */
color: #9c9c9c;
text-shadow: 0px 1px 0px #fff;
font-size: 9pt;
line-height: 25px;
}
.cat_list a{
/* Formattiamo nuovamente il testo, nel caso in cui le categorie presentano un link */
color: #9c9c9c;
text-shadow: 0px 1px 0px #fff;
font-size: 9pt;
line-height: 25px;
text-decoration: none;
}
.cat_list li:hover{
/* Utilizziamo un altro colore di sfondo al passaggio del mouse su una categoria */
background-color: #e4e4e4;
}

// Quando sono carichi tutti i documenti della pagina, possono partire gli effetti jQuery
$(document).ready(function(){
	//Quando si passa sopra ad un link presente nel div "cat_list"..
	$(".cat_list a").mouseover(function () {
		//Al link si aggiunge un padding-left di 20px, e l'effetto dura per 700 ms (1000 è un secondo)
		$(this).animate({paddingLeft: 20}, 700);
	});
	//Quando si leva il mouse da un link del div "cat_list"..
	$(".cat_list a").mouseout(function () {
		//Questo ritorna al padding originario (cioè 0)
		$(this).animate({paddingLeft: 0}, 700);
	});
	//Quando si clicca sopra al div "cat_title" (cioè sopra al nome del menu)..
	$(".cat_title").click(function () {
		//Il div "cat_list" verrà chiuso con un effetto slide
		$(".cat_list").slideToggle("slow");
	});
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head>
<title>jQuery categories</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// Quando sono carichi tutti i documenti della pagina, possono partire gli effetti jQuery
$(document).ready(function(){
	//Quando si passa sopra ad un link presente nel div "cat_list"..
	$(".cat_list a").mouseover(function () {
		//Al link si aggiunge un padding-left di 20px, e l'effetto dura per 700 ms (1000 è un secondo)
		$(this).animate({paddingLeft: 20}, 700);
	});
	//Quando si leva il mouse da un link del div "cat_list"..
	$(".cat_list a").mouseout(function () {
		//Questo ritorna al padding originario (cioè 0)
		$(this).animate({paddingLeft: 0}, 700);
	});
	//Quando si clicca sopra al div "cat_title" (cioè sopra al nome del menu)..
	$(".cat_title").click(function () {
		//Il div "cat_list" verrà chiuso con un effetto slide
		$(".cat_list").slideToggle("slow");
	});
});
</script>
</head>
 
 
<body>
<div class="cat_container">
	<div class="cat_title">
	Categories
	</div>
	<div class="cat_list">
		<ul>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
			<li><a href="#">Ispirations</a></li>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
		</ul>
	</div>
</div>
</body>
</html>

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;
}

< !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>