CSS: bottoni in rilievo con box-shadow

  • CSS
  • Gabriele Romanato

Possiamo utilizzare la proprietà CSS3 box-shadow in modo creativo per realizzare effetti interessanti. Uno di questi è sicuramente quello dei bottoni in rilievo. Vediamo come fare.

Partendo da questa marcatura:


<div id="test" class="embossed">Test</div>​

Utilizzeremo valori negativi e la parola chiave inset per creare l'effetto in rilievo:


.embossed {
    box-shadow: inset 2px 2px -1px #ccc, inset 1px -1px 8px #999;
}
    
#test {
    width: 100px;
	padding: 10px;
	background: #eee;
    margin: 2em;
    text-align: center;
    font-size: 1.4em;
    border-radius: 8px;
    cursor: pointer;
}​

Potete visionare l'esempio finale in questa pagina.

Torna su