ボタンを作ってみよう

　Webサイトを構築するにあたって、ボタンは最も頻繁に使う部品だと思います。これまでのWeb制作では、グラデーションや角丸などリッチな表現のボタンを作るには画像を使う必要がありました。

　しかし、CSS3を使えば、このようなボタンも画像を使わずに作成できます。

クリックすると、ボタンがへこむ

　画像を使わずにCSSだけで作ったボタンは、テキストエディタだけで編集ができるので、作業効率の向上が期待できます。また、CSSファイルで管理できるので、一括で表現の変更ができ、メンテナンス性が高まるなど、多くの利点があります。

　このボタンを作っているHTMLとCSSのコードは以下のようになっています。実際にはCSS3のプロパティは「-webkit-」、「-moz-」などのベンダプレフィックスを付ける必要があります（詳細は後述）。

#btn {     position: relative;     display: block;     width: 200px;     padding: 15px 0;     text-align: center;     cursor: pointer;          color: white;     text-decoration: none;     line-height: 1;     font-weight: bold;     letter-spacing: 3px;     text-shadow: -1px -1px 1px #C60;　// CSS3プロパティ     border-radius: 10px;　// CSS3プロパティ     box-shadow: 0 5px 1px #C60, 0 7px 5px #CCC;　// CSS3プロパティ   }   #btn:link, #btn:visited { background: #F70; }   #btn:hover { background: #FB3; }   #btn:active {     background: #FC2;     box-shadow: 0 0 1px #871, 0 2px 2px #CCC;　// CSS3プロパティ     top: 5px;   }