J'essaie de reproduire un style de bouton dans une maquette de Photoshop comportant deux ombres. La première ombre est une ombre de boîte plus claire intérieure (2px) et la seconde est une ombre portée à l'extérieur du bouton (5px) lui-même.
Dans Photoshop, c'est facile - Ombre intérieure et Ombre portée. En CSS, je peux apparemment avoir l'un ou l'autre, mais pas les deux en même temps.
Si vous essayez le code ci-dessous dans un navigateur, vous verrez que le box-shadow remplace le box-shadow en médaillon.
Voici l'ombre de la boîte en médaillon:
box-shadow: inset 0 2px 0px #dcffa6;Et voici ce que je voudrais pour l'ombre portée sur le bouton:
box-shadow: 0 2px 5px #000;Pour le contexte, voici mon code de bouton complet (avec des dégradés et tout):
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;
}