Oggi vediamo come creare un menu CSS a pulsanti. La caratteristica principale di un menu a pulsanti a differenza di un menu a blocchi sta nel principio grafico di profondità. Cosa voglio dire: avete presente un classico pulsante di windows?

I pulsanti di windows, e mi riferisco a quelli squadrati, hanno l’effetto ombra che permetta appunto di creare la ‘simulazione‘ di profondità.
L’HTML del menu a pulsanti è sempre un semplice elenco non ordinato:

<ul class="Menu">
     <li><a href="#">prima</a></li>
     <li><a href="#">seconda</a></li>
</ul>

Passiamo adesso ad esaminare le regole CSS:

.Menu{
width:250px;
margin:0;
padding:2px;
border:2px solid #999;
background:#CCC;
color:#000;
text-align:center;
font:weight:bold;
text-transform:uppercase;
}
.Menu li
{
list-style:none;
}
.Menu a{
display:block;
text-decoration:none;
border:1px solid;
border-color:#fff #666 #666 #fff;
padding:3px;
}
.Menu a:link, .Menu:visited
{
background:#ccc;
color:#000;
}
.Menu a:hover, .Menu a:focus, .Menu a:active{
background: #aaa;
color:#000;
}

Ho creato una pagina apposita per questo esempio: Menu CSS a Pulsanti

Provatelo e commentatelo! Al prossimo Menu!