CSS3サンプル：ボタン

· by · in

汎用的に使えるボタンのサンプルメモ。

ボタン

HTML

<a class="button_sample1">ボタン</a>

クラスに「button_sample1」だけ。

CSS

.button_sample1{
background:#999999 -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.4)), to(rgba(255,255,255,0)));
background:#999999 -moz-linear-gradient(top, rgba(255,255,255,0.4), rgba(255,255,255,0));
width:100px;
padding:5px;
display:block;
border-radius:5px;
-ms-border-raduis:5px;
text-decoration:none !important;
color:#fff !important;
cursor:pointer;
text-align:center;
text-shadow:-1px -1px 0 rgba(0,0,0,0.3);
box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5);
border:solid 1px #666666;
-webkit-transition: 0.2s ease-in-out;
}
.button_sample1:hover {
background:#aaaaaa -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.6)), to(rgba(255,255,255,0)));
background:#aaaaaa -moz-linear-gradient(top, rgba(255,255,255,0.6), rgba(255,255,255,0));
}
.button_sample1:active {
background:#aaaaaa -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), to(rgba(255,255,255,0.3)));
background:#aaaaaa -moz-linear-gradient(top, rgba(0,0,0,0.2), rgba(255,255,255,0.3));
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.4);
}

基本的に「.button_sample1」冒頭の背景色だけ変えればそれなりに見える。
ボタンの基本色は background の色コードで設定し、 gradient によるグラデーションは白を半透明で乗せることでハイライトとして使っている。

変更が多い属性は前半に固め、「text-decoration:none !important;」以降は使う色によって若干調整というレベル。

ちなみに改行除去すればCSSは1051文字（約1Kバイト）。
画像作ってオンマウス処理するよりは確実に軽いです。

筆者について

KaBuKi
ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。
Tags: