暇だったんでポチポチ作ったんですが、割と実用的な感じになったので記事にしておきます。ちなみにIEで見るとちょっとダサいですが、見れないほどではないです。
とりあえず作ったものを公開。|
1 |
<a href="#" class="css3button">CSS3_Button</a> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.css3button { color: #fff; font: bold 16px sans-serif; text-shadow: 0 0 1px #000; letter-spacing: 1px; border: 1px #755 solid; border-radius: 4px; padding: 8px 16px; box-shadow: 0 1px 0 0 rgba(255,255,255,0.6) inset; background-color: #d15; background: linear-gradient(#d15, #602); background: -moz-linear-gradient(#d15, #602); background: -webkit-linear-gradient(#d15, #602); background: -o-linear-gradient(#d15, #602); background: -ms-linear-gradient(#d15, #602); transition-duration:0.1s; -moz-transition-duration:0.1s; -webkit-transition-duration:0.1s; -o-transition-duration:0.1s; -ms-transition-duration:0.1s; } .css3button:hover { box-shadow: 0 1px 0 0 rgba(255,255,255,0.4) inset; background: linear-gradient(#b04, #602); background: -moz-linear-gradient(#b04, #602); background: -webkit-linear-gradient(#b04, #602) ; background: -o-linear-gradient(#b04, #602); background: -ms-linear-gradient(#b04, #602); } .css3button:active { color: #eee; position:relative; top: 1px; box-shadow: 0 1px 0 0 rgba(255,255,255,0.2) inset; background: linear-gradient(#a03, #501); background: -moz-linear-gradient(#a03, #501); background: -webkit-linear-gradient(#a03, #501); background: -o-linear-gradient(#a03, #501); background: -ms-linear-gradient(#a03, #501); } |
Name : Leo
北海道在住の元気な22歳。ゲーセンでバイト中。
右手に酒、左手に煙草、目の前にPCという生活。
割とクズだけどいい人（ただし彼女はいない）。
今欲しいのはリボルトの実機。
Web制作は結構好き。
