[解決済み] このベベルボタンをCSSで実現するには？

質問

CSSでこのようなボタンを作成することは可能でしょうか？

もちろん、画像を背景に使うという意味ではなく、それは簡単にできる。私が言っているのは、webkitタイプのソリューションのことです。

どのように解決するのか？

簡単に言うと はい、できます。 . さっそく挑戦してみました。

これが私が行った手順です。

• ビットマップをSketchで開いてみました。
• ビットマップを拡大し、丸みを帯びた長方形で輪郭をなぞり、正しい色を付けました。
• を追加し始めました。 box-shadow を、外側と内側の両方で、ビットマップを可能な限り再現するために使用しました。なお、ボックスの影には黒と白（アルファ値を変化させたもの）しか使っていません。こうすることで、ボタンの色を簡単に変更することができます。 background-color .
• また、ボックスシャドウだけではうまくいかなかったので、ボトムシャドウとトップグロー用に2つのシェイプを追加しています。2つの要素だけであれば問題ないはずです。 :before と :after の疑似要素で、これらをCSSに含めることができます。

出来上がった画像は次のような感じです（正確ではありませんが、かなり近いと思います）。

そして、「css属性をコピー」を選んで、手動で:beforeと:afterの要素を追加し、微調整を行うことで、描画をcssに変換したのです。これが、私が作った（接頭辞なしの）cssです。

.button {
    display: inline-block;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,.3);
    font-family: sans-serif;
    box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.4),
        inset 0 0 3px 0 rgba(0,0,0,.4),
        inset 0 0 3px 5px rgba(0,0,0,.05),
        2px 2px 4px 0 rgba(0,0,0,.25);
    border-radius: 4px;
    padding: 8px 16px;;
    font-size: 12px;
    line-height: 14px;
    position: relative;
}
.button.red { background: #EA3D33; }
.button.green { background: #7ED321; }
.button.blue { background: #4A90E2; }
.button:before, .button:after {
    content: '';
    display: block;
    position: absolute;
    left: 2px;
    right: 2px;
    height: 3px;
}
.button:before {
    top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: rgba(255,255,255,.6);
    box-shadow: 0 1px 2px 0 rgba(255,255,255,.6);
}
.button:after {
    bottom: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: rgba(0,0,0,.15);
    box-shadow: 0 -1px 2px 0 rgba(0,0,0,.15);
}

とバイオリンで実演します。 http://jsfiddle.net/pn4qk3wL/