CSS: creare bottoni in 3D

  • CSS
  • Gabriele Romanato

Realizzare bottoni in 3D per un menu di navigazione richiede solo l'uso della proprietà border-color. Infatti l'effetto 3D viene creato alternando colori chiari e scuri sui quattro bordi ed invertendo la sequenza al passaggio del mouse sui bottoni. Vediamo i dettagli.

Una semplice struttura HTML:


<ul id="navigation">

     <li><a href="#">Home</a></li>
     <li><a href="#">Articoli</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contatti</a></li>
     <li><a href="#">Mappa del sito</a></li>

</ul>

Definiamo quindi gli stili di base per un classico menu orizzontale:


#navigation {
	margin: 0;
	padding: 0 1em;
	list-style: none;
	background: #000;
	color: #fff;
	height: 3em;
}

#navigation li {
	float: left;
	height: 100%;
	margin-right: 0.5em;
	margin-top: 1em;
}

A questo punto giochiamo con la proprietà border-color sia sullo stato normale che su :hover:


#navigation li a:link,
#navigation li a:visited {
	background: #aaa;
	border: 0.2em solid;
	border-color: #ccc #aaa #888 #ddd;
	color: #000;
	padding: 0 1em;
	text-decoration: none;
	font-weight: bold;
	float: left;
	height: 1.8em;
	line-height: 1.8;
	border-radius: 6px 6px 0 0;
}

#navigation li a:hover {
	background: #999;
	color: #222;
	border-color: #888 #ddd #ccc #aaa;
}

La sequenza di colori è la seguente:

  1. bordo superiore e sinistro più chiari
  2. bordo destro e inferiore più scuri

E su :hover tale sequenza si inverte. Potete visionare l'esempio finale in questa pagina.

Torna su