box shadow element into button tag - html

Question

Shadows work properly on all elements, on IE and Firefox, but not for the button element in Chrome and Safari:
http://jsfiddle.net/q8xaa/
<button class="btn-test">
<span class="btn">test</span>
</button>
.btn-test {
background-color: transparent;
border: 0;
padding: 0px;
}
.btn-test:hover .btn {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn-test .btn {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-box-shadow: 4px 4px 0px #000;
-moz-box-shadow: 4px 4px 0px #000;
box-shadow: 4px 4px 0px #000;
background-color: #f00;
margin: 0px;
padding: 10px;
height: 40px;
display: inline-block;
}
button {
margin: 0;
padding: 0;
border: 0;
overflow: visible;
}
Any ideas on how to solve?

Answer 1

Example http://jsfiddle.net/H23Jy/1/
I tried forcing a zero CSS3 transformation as shown below
CSS
button span {
-webkit-transform: translate3d(0,0,0);
}
and the shadow seems to work fine also on Chrome 35.
But as you can see, in that way the button is not vertically aligned with the other buttons, so you could use -webkit-transform: translateY(-3px); instead
Result