【コピペで簡単】押したくなる立体的なボタン CSSだけでできるリアルな3Dボタンの作り方

今回はCSS3を利用したアニメーション付き3Dボタンの作り方を紹介します。まずは下のデモをご覧ください。
 
完成した3Dボタンのデモ
 
 
このようなボタンは、全ての機能が完全にサポートされていないブラウザで表示した場合でも、壊れて見えたり振る舞ったりしてはいけません。どんなブラウザで見たときも正常に機能するように気を付けましょう。
 
 
それでは始めましょう！
 
 
まず、ボタンに変わるリンクをHTMLに追加します。<input>要素や<button>要素を使う方法もありますが、今回は<a>要素を使います。
 
 
HTML<a href=“#” class=“button”>Press Me</a> 
 
続いてCSSの記述です。ボタンの形状と色を設定するところから始めます。
 
CSSbody {
font-family: Helvetica, Arial, sans-serif;
background: #d6d6d6;
text-align: center;
padding: 50px 0px;
}
.button {
display

リンク元