Bottone con i css

[cousti]

Salve, vorrei creare un bottone uguale a:
questo
con i css.
Per farlo, ho deciso di creare dei div uno dentro l'altro, di diversi colori e via via più piccoli, e di centrarli.
Il mio lavoro è stato:

div#bottone {
 position:relative; 
 width:300px; 
 height:250px; 
 background:#f95000; 
 color: rgb(227,227,228); 
 }  

div#botton {
position:relative; 
 width:298px; 
 height:248px; 
 background: rgb(235,236,237); 
 color: rgb(235,236,237); 
left:50%;
    top:50%;
    margin-left:-149px;
    margin-top:-124px;
 }  
div#botto {
position:absolute; 
 width:297px; 
 height:247px; 
 background: rgb(235,236,237); 
 color: rgb(248,249,250); 
left:50%;
    top:50%;
    margin-left:-149px;
    margin-top:-124px;
 }  
div#bott {
position:absolute; 
 width:293px; 
 height:243px; 
 background: rgb(235,236,237); 
 color: rgb(235,236,237); 
left:50%;
    top:50%;
    margin-left:-149px;
    margin-top:-124px
 } 
div#bot {
position:absolute; 
 width:292px; 
 height:242px; 
 background:#f95000; 
 color: rgb(221,222,223); 
left:50%;
    top:50%;
    margin-left:-149px;
    margin-top:-124px
 }

E poi, in html:

<div id="content">
<div id="bottone">
<div id="botton"></div>
<div id="botto"></div>
<div id="bott"></div>
<div id="bot"></div>

</div>
</div>

Solo che.. non si vede niente

Grazie a chiunque mi aiuterà,

Buone feste.

[Prill]

Perché tutta quella roba?

css:

#outer {
	width:300px;
	height:250px;
	border:2px solid pink;
	padding:8px;
}
#inner {
	height:246px;
	border:2px solid pink;
}

html:

<div id="outer">
  <div id="inner"></div>
</div>

poi per distanziare i contenuti del div interno usi due paragrafi impostando come vuoi i margini superiore e inferiore

N.B.:ricorda che i bordi (così come i margini e i padding) si sommano alle dimensioni per width e height, quindi avendo nell'esempio 2+2=4 pixel di bordi raggiungiamo con il div inner i 250 pixel specificando un'altezza di 246 (se variamo le dimensioni dei bordi sarà da variare l'altezza).

Altrimenti, a semplificare il codice, poiché il tuo riquadro ha dimensioni precise, puoi utilizzare un div delle dimensioni volute al quale assegni un'immagine di sfondo che riproduce la cornice

[ratte]

OMG... va bene sperimentare... ma anche a me sembra che ci sia del lavoro "in avanzo".

Usare SVG no?

o/ !

[fcaldera]

forse ricordo male ma potresti addirittura usare un solo elemento simulando i vari bordi con degli outline e box-shadow multipli di vario colore e spessore


edit:
esempio -> http://jsbin.com/egojuy/1/edit