CODEWITHSUNDEEP
htmlcss
ReDEyeS
ReDEyeS

Reputation: 851

box shadow element into button tag

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?

Upvotes: 1

Views: 413

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

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

enter image description here

Upvotes: 2

Related Questions