CHIBATCH.JP

CSS3を使ったボタンデザイン

CSS3の「これは！」という機能を紹介するエントリーの第2回。CSS3で作るボタンデザインを紹介します。
前回は画像を使わずに角丸を作るborder-radiusというプロパティの紹介だったのですが、ただの仕様書の写しのようになってしまいました...。 前回の反省も踏まえて、今回はサンプル付きで紹介したいと思います。

Button Design Showcaseというエントリーのなかから、CSS3で作れそうなボタンのデザインをいくつかピックアップしました。
※サンプルはFirefox3.5～、Webkitでしか確認していません。

かっこいいボタンがいくつもあったのですが、CSS3の新機能を紹介できそうなボタンのデザインとして以下の3つを選びました。

基本のボタン

サンプルで使ったボタンのHTMLソース。
本当にシンプルな<button>だけのソースです。

<button>CSS3 Button Design</button>

アップル風のボタン

apple風のボタン

まずはアップル風のボタン。アップル風といっても僕の中でのイメージなだけですなんですが、上の画像のようなボタンをCSSで作ってみます。

アップル風のボタンを作るために使ったプロパティは「box-shadow」。それと背景画像には黒40％→透明の透過pngを使いました。

デモページ

ソース

button {
  /* <button>のスタイルをリセット */
  font-family: Verdana;
  font-weight: bold;
  border: none;

  /* <button> */
  padding: .5em 1em;
  cursor: pointer;
  color: #000;
  background-color: #FFF;
  background-image: url(/path/to/background-image);
  background-position: center center;
  background-repeat: repeat-x;

  /* CSS3! */
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-box-shadow: 0 0 8px #00bbff;
  -moz-box-shadow: 0 0 8px #00bbff;
}

アップル風のボタンで使用した背景画像をダウンロード

透過pngのグラデーションを使ったボタン

グラデーションがきれいなボタン

透過pngのグラデーションを使ったボタンのサンプル。
3ping.orgのCSSの実装状況で変わるボックスのデザイン方法にあるサンプルのように白→透明のグラデーションの透過pngを背景に使っています。
サンプルで使ったプロパティはbox-shadowとtext-shadow（CSS2）の2つと透過pngの背景画像です。ソースでは背景色の指定を左側のボタンのものにしていますが、透過pngを使っているので、好きな色を指定できます。

デモページ

ソース

.sample button {
  /* <button>のスタイルをリセット */
  font-family: Verdana;
  font-weight: bold;
  border: none;

  /* <button> */
  padding: .5em 1em;
  cursor: pointer;
  color: #FFF;
  background-color: #a80c21;
  background-image: url(/path/to/background-image);
  background-position: center center;
  background-repeat: repeat-x;

  /* CSS2/3! */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -moz-box-shadow: 0 2px 2px #666;
  -webkit-box-shadow: 0 2px 2px #666;
  text-shadow: -1px -1px 0 #333;
}

グラデーションがきれいなボタンで使った背景画像をダウンロード

RGBaを使った透過のボタン

RGBaを使った透過のボタン

RGBaを使って背景色を透過にしたボタンのサンプル。
CSS3では背景色にRGBaの値を指定することができるようになります。。RGBは今までどおりのRGBの値（16進数ではなく0～255）を指定し、aの部分には透明度（0～1）を指定します。

背景色だけを透過にできるという点がopacityプロパティと違います。

デモページ

ソース

.sample button {
  /* <button>のスタイルをリセット */
  font-family: Verdana;
  font-weight: bold;
  border: none;

  /* <button> */
  padding: .5em 1em;
  cursor: pointer;
  color: #FFF;
  background-color: rgba(0,0,0,0.7);
  background-image: url(/path/to/background-image);
  background-position: center center;
  background-repeat: repeat-x;
  /* CSS2/3! */
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -moz-box-shadow: 0 2px 4px #000;
  -webkit-box-shadow: 0 2px 4px #000;
}

透過のボタンで使った背景画像をダウンロード

今回のサンプルを作っていて思ったのですが、CSS3が主要ブラウザで使えるようになればスライスの手間はかなり減りますが、透過pngのグラデーションの部分が結構手間だな...都思いました。
デザイン通りのグラデーションを作るっていうのは大変ですが、スライスする手間に比べたら全然簡単ですよね！
デザイナーさんにフォント・縦が可変のグラデーション部分だけ作ってくれって言って作ってくれたら一番良いんだけどさ。

TAG

COMMENTS

コメントはまだありません。ぜひあなたの一言を！

GIVE ME A COMMENT!