CSS3でボタンをデザイン

CSS3でボタンをつくってみます。

ボタンの作成

CSS3 では、多くの表現が出来るようになったため、画像を使わずにデザインされたボタンを作る事が出来ます。

ボタンの仕組みを a タグに実装してみます。

<a href="javascript:void(0);" class="button rose">保存する</a>

基本的なボタンのデザインを指定します。まるい角と影を表現します。

ボタンのスタイルを設定

.button {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.button:hover {
  text-decoration: none;
}

.button:active {
  position: relative;
  top: 1px;
}

ボタンの色やマウスオーバーを設定

色を個別に設定する事で、いろいろな色のボタンを作ることが出来ます。

.rose {
  color: #fae7e9;
  border: solid 1px #b73948;
  background: #da5867;
  background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
  background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rose:hover {
  background: #ba4b58;
  background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
  background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}
.rose:active {
  color: #dca4ab;
  background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
  background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
}

結果