今のうちにチェックしておきたいCSS3　ボタンのサンプルでよく分かるその特徴

CSS3 button

動作しないブラウザがある以上は今すぐは難しいかもしれませんが、CSS3ボタンのサンプル集です。フォトショップなどで編集していた部分も、これからはCSSで指定できてしまうんですね。これは今のうちにチェックしておいた方がいいかも。

CSS3をボタン作成ツールで体感

※CSS3未対応のブラウザでは正常に動作しませんのでご注意を

Button Maker

CSS3がどんなものか、実際に触れることで堪能できます。

個人的には、ドロップシャドウやグラデーションの色合いが素晴らしいと思う。

Button Maker

CSS3プロパティジェネレーター

フォトショップのような感じでグラデーションが細かく設定出来ます。これもCSS3の特徴ですね。

CSS3プロパティジェネレーター

Source Photoshopライクな操作で手軽に作れるCSS3ジェネレーター

CSS3ボタンのサンプル集

building beautiful buttons with css gradients

こちらも画像を使わずにCSSだけでグラデーションなどを表現

building beautiful buttons with css gradients

CSS3 Box-Shadow with Inset Values -- The Aqua Button ReReVisited!

コードが見事なのでメモ。アクアボタンまでできるんですね。

The Aqua Button ReReVisited!

HTML:

<input type="button" class="new-aqua" value="Login"/>

CSS:

input[type=button].new-aqua {
  width: 155px;
  height: 35px;
  background: #cde;
  border: 2px solid #ccc;
  border-color: #8ba2c1 #5890bf #4f93ca #768fa5;
  font: 600 16px/1 Lucida Sans, Verdana, sans-serif;
  color: #fff;
  text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px;
  box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
  -moz-box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
  -webkit-box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
}
.new-aqua:hover {
  text-shadow: rgb(255, 255, 255) 0px 0px 5px;
}