こういうやつ。考えられるのは、
-
box-shadowを使う -
borderを使う - 擬似要素を使う
-
border-imageを使う
今回はサンプルの見栄えを揃えるためにwidthを適用させたりしているが、実際にはボタンのラベルの長さに左右されないような、という前提でつくる。
box-shadowを使う
btn {
box-shadow: 0 6px 0 #369;
}
ぼかしが0のbox-shadowにすることでそれっぽく見せる。 ただこれだとAndroid2.3（2.2かもしれない）以下では影が見えないので注意。
borderを使う
.btn {
border-bottom-width: 8px;
}
これもそれっぽく対応できるが、border-radiusを使っている場合にはborderの外側部分にだけborder-radiusが適用されるので注意。
※もしかしたらブラウザによって違うかも。
擬似要素を使う
.btn{
position: relative;
}
.btn:after {
display: block;
content: "";
position: absolute;
left: -2px;
right: -2px;
bottom: -8px;
z-index: -1;
border-radius: inherit;
height: 100%;
background-color: #369;
}
擬似要素で影部分のオブジェクトをつくり、positionで配置を制御する。 もしサンプルのようにborderがある場合には、その分の値をleft、rightで調整する。大きさはbottomで。
悪くはない感じもするが、少し大げさかもしれない。
border-imageを使う
.btn {
/* box-sizing: border-box; */
border-color: transparent;
background-color: transparent;
border-style: solid;
border-width: 8px 8px 16px 8px;
border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAsBAMAAAD2lqe8AAAAJ1BMVEUaZJwcZZ0lbaJJga1Lga5Tn7taqMCCp8eDqMiP5N6q/+/i6/L////KlPzsAAAAnUlEQVQoz+2SoRHCUBBE9zq4JYEME0UJlJASaAMXTToAg41H5Lso6CARWxQmZP5RAIrn9s3OmT1Ir4YL5VWCZmbcBDW7Pi0Mp1KYNmtOaTh0GPcp416jPefiUaHpczGUYArwL34hLM7gsDiUw+KUDo9jG2jb7B2coOcPYwQJ+0QHCX6BY8wF2igqjFHUmKLooHCkEBQqnSA9105xkd4swUbH0UjqRQAAAABJRU5ErkJggg==) 8 8 16 8 fill repeat;
}
border-imageも結構あり。ただborderなので、デザインによってはその太さ分見栄えが大きくなってしまうので、box-sizing: border-box のようなものも使うといいかもしれない。その場合はpaddingのことも考慮しないといけないけど。
今回のサンプルはCodePenに。