CSS3でなんだかよく分からないボタンを作る

マウスオーバーでベスっぽくなります。何がベスなのかはオトナの事情でナイショです。画像不使用。ソースコード雑多。なんか動作が重いです。テキストがミョコミョコ動くのは多分妖精さんの仕業です。(本当は、多分インラインブロックで並べてるせいで、文字の横幅の変化が干渉しあってるんだと思います。各ブロックをemによる絶対位置で配置ですれば多分直ります。)

※使用プロパティ
-moz-box-shadow
-moz-transform-origin
-moz-transform(:rotate(hogedeg))
-moz-border-radius
text-shadow

ポイントはbox-shadowの値の単位を「em」にして、文字サイズを基準にして指定する事で文字サイズ可変時のグラデーションの大きさを追従させている点と、シャドウの色指定をrgba指定で行うことによって背景色変更時に容易に対応出来るようにしてある点です。
ソースの視認性を考慮してFirefox3.5以上にのみ対応の記述にしましたが、Safariでも若干記述方法が異なるだけで、ほぼ同様の効果を与える事が可能です。更にSafari4だと、背景のグラデーションや一枚の画像を使ったボーダー・同一ボックスに多数の背景画像指定、画像の拡大方式の指定。cssの様々なプロパティの値のイージングアニメーションを伴う変化など、もっと色々出来たりします。その実力は最早、ちょっとした画像編集ソフト並です。
‥が、画像で作った方が楽だったりもします(・ω・`)

問題の画像。
※参考にさせていただいたドキュメント
CSS3だけで丸いボタンを作る方法 - CSS3で遊んでみる | CSS-EBLOGなど。
ghostpia.com