Aprende a crear botones con css

los botones  son basicos en las paginas web. y que mejor que tengan un buen estilo

para crear botones estilo plastico con css usamos el metodo sombra interior  
box-shadow:inset 0px 2px 1px rgba(55,55,55,0.5),
que agrega una sombra interior al contenedor o bloque espan
aunque tambien puede usarse en bloques contenedor como div  o listas li

<style>
/*stylo 1*/
.bt{background: rgb(200,200,200); display: inline-block; padding: 3px; margin-left:3px;  border-radius: 5px; box-shadow:inset 0px 2px 1px rgba(55,55,55,0.5), inset 0px -2px 1px rgba(255,255,255,0.5);}
.bt:hover{display: inline-block; padding: 3px; margin-left:3px;  border-radius: 5px; box-shadow:inset 0px 2px 1px rgba(5,5,5,0.9), inset 0px -2px 1px rgba(255,255,255,0.9);}

/*estylo 2*/
.bt2{background: rgb(200,200,200);display: inline; padding: 5px; margin-left: 2px; margin-right: 2px;  box-shadow:inset 0px 8px 10px rgba(255,255,255,0.2),inset 0px -8px 10px rgba(0,0,0,0.2);border: solid 1px rgb(120,120,120); border-radius: 5px;}
.bt2:hover{display: inline;padding: 5px; box-shadow:inset 0 8px 10px rgba(120,120,120,0.2),inset 0 -8px 10px rgba(0,0,0,0.2);border: solid 1px rgb(120,120,120); border-radius: 5px;}
</style>

<div class='bt'><a href="#" onclick="alert('1')">inicio</a> </div>
<div class='bt2'><a href="#" onclick="alert('2')">inicio2</a> </div>

puedes aplicarlo igual para listas en la etiqueta <li> 

en ambos casos solo deves cambiar el fondo del contenedor, para que quede a tu gusto
aqui un demo abajo

inicio

inicio2