閉じる
CSS
  • 2011.10.13 (Thu)

CSS3で作るクリックしてみたくなる角丸グラデーションボタン

CSS3 グラデーションボタン

CSS3のグラデーション機能を使い画像を使用することなくリッチでクリックしたくなるボタンの作成方法を紹介します。
こうしたCSSで作る利点は、CSSファイルで管理が出来ますし、任意の要素値を調整することで、すぐに応用が効くってとこがいいですね。

完成のデモサンプルはコチラ↓

CSS

.blue a {
  width: 150px;
  padding: 10px 30px 10px 30px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  text-shadow: -1px -1px 2px #004da3;
  background: -moz-linear-gradient(#2c9bf9, #037fde 35%, #004da3); 
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2c9bf9),color-stop(.35, #037fde),color-stop(1, #004da3)); 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2c9bf9, endColorstr=#004da3); 
  border: 1px solid #004da3;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  display: block;
}

.blue a:hover {
  text-shadow: -1px -1px 2px #004da3;
  background: -moz-linear-gradient(#004da3, #037fde 75%, #2c9bf9);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #004da3),color-stop(.75, #037fde),color-stop(1, #2c9bf9));
  border: 1px solid #004da3;
}

ソース:プロパティ解説

ボタンを押したときのアクション『active』

ボタンアクションプレビュー

『active』は下記の様なCSSを追加します。

.blue02 a:active {
  text-shadow: -1px -1px 2px #004da3;
  background: -moz-linear-gradient(#0879f8, #1a8cf7 45%, #69b0ff);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0879f8),color-stop(.45, #1a8cf7),color-stop(1, #69b0ff));
  border: 1px solid #004da3;
}

クロスブラウザは以下動作確認が出来ています。

プレビュー

残念ながらOperaはまだ正式サポートされていないようでグラデーションになりませんでした。まぁその内サポートされるでしょ。

Opera プレビュー

それまではOpera用のCSSを読み込ませて通常のbackgroundで対応させるしかないでしょうか。

噂に聞くとFirefoxの指定方法で最終的には一本化されるらしいと…ホンマなんですかね?
そうなると楽ですね。

完成のデモサンプルはコチラ↓

2011.11.09 追記

オペラ用のグラデーションはbackgroundに下記のように追加してあげると表示させることができました。
デモではblackの色のみ対応させてます。

/* Opera 11.10+ */
  background: -o-linear-gradient(#505050, #464646, #151515);