Saya mencoba mereplikasi gaya tombol di mock-up Photoshop yang memiliki dua bayangan. Bayangan pertama adalah bayangan kotak yang lebih ringan (2px), dan yang kedua adalah drop shadow di luar tombol (5px) itu sendiri.
Di Photoshop ini mudah - Inner Shadow dan Drop Shadow. Dalam CSS saya tampaknya dapat memiliki satu atau yang lain, tetapi tidak keduanya sekaligus.
Jika Anda mencoba kode di bawah ini di browser, Anda akan melihat bahwa bayangan kotak menimpa bayangan kotak inset.
Inilah bayangan kotak inset:
box-shadow: inset 0 2px 0px #dcffa6;Dan inilah yang saya inginkan untuk drop shadow pada tombol:
box-shadow: 0 2px 5px #000;Untuk konteks, inilah kode tombol lengkap saya (dengan gradien dan semua):
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;
}