WebキットベースのブラウザーのCSS 3のボタンにベベルとエンボス効果を適用する方法は？

Question

CSS 3でSubmitボタンにベベル効果とエンボス効果を作成する方法は？

このような。

拡大画像

Web-kitベースのブラウザのみを検討しています。および角を丸くする方法とボタンにグラデーションを付ける方法については質問せず、ベベル効果についてのみ質問しています

Html

<input type="submit" value="Submit your entry" class="input" />

Answer 1

これは、複数のボックスシャドウを使用することで、追加のマークアップを使用しなくても可能です。

box-shadow: 
  0 1px 2px #fff, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/

http://jsfiddle.net/NPXfe/