Estoy tratando de replicar un estilo de botón en una maqueta de Photoshop que tiene dos sombras. La primera sombra es una sombra de cuadro más clara interna (2px), y la segunda es una sombra fuera del botón (5px).
En Photoshop esto es fácil: Inner Shadow y Drop Shadow. En CSS, aparentemente puedo tener uno u otro, pero no ambos al mismo tiempo.
Si prueba el siguiente código en un navegador, verá que la sombra de cuadro anula la sombra de cuadro insertada.
Aquí está la sombra del cuadro insertado:
box-shadow: inset 0 2px 0px #dcffa6;Y esto es lo que me gustaría para la sombra del botón:
box-shadow: 0 2px 5px #000;Para el contexto, aquí está mi código de botón completo (con gradientes y todo):
button {
outline: none;
position: relative;
width: 160px;
height: 40px;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-weight: 800;
font-size: 12px;
text-shadow: 0px 1px 3px black;
border-radius: 3px;
background-color: #669900;
background: -webkit-gradient(linear, left top, left bottom, from(#97cb52), to(#669900));
background: -moz-linear-gradient(top, #97cb52, #669900);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#97cb52', endColorstr='#669900');
box-shadow: inset 0 2px 0px #dcffa6;
box-shadow: 0 2px 5px #000;
border: 1px solid #222;
cursor: pointer;
}