以前、 CSSでボタンをつくったこと がありました。
最近は影とグラデーションを足してつかうことが多くなってきたのでアップデートをかけておきたいと思います。
See the Pen hello world. by kimmy (@kimmy) on CodePen.
HTML
<div class="wrapper"> <div class="btn"> <p class="inner">H</p> </div> <div class="btn"> <p class="inner">E</p> </div> <div class="btn"> <p class="inner">L</p> </div> <div class="btn"> <p class="inner">L</p> </div> <div class="btn"> <p class="inner">O</p> </div> </div> <div class="wrapper"> <div class="btn"> <p class="inner">W</p> </div> <div class="btn"> <p class="inner">O</p> </div> <div class="btn"> <p class="inner">R</p> </div> <div class="btn"> <p class="inner">L</p> </div> <div class="btn"> <p class="inner">D</p> </div> </div>
CSS
body { background: #a8a8a8; } .wrapper { overflow: hidden; } .btn { float: left; margin: 10px; padding: 20px; min-width: 80px; font-size: 14px; letter-spacing: .2em; text-align: center; } .btn .inner { display: inline-block; padding: 20px 30px; border-bottom: solid #333 4px; border-radius: 12px; color: #eee; cursor: pointer; text-decoration: none; background: -webkit-gradient(linear, left top, left bottom, from(#5a5a5a), to(#4e4e4e)); background: -webkit-linear-gradient(#5a5a5a, #4e4e4e); background: linear-gradient(#5a5a5a, #4e4e4e); -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); } .btn .inner:hover { margin-top: 4px; border: none; -webkit-box-shadow: 0 0 5px transparent; box-shadow: 0 0 5px transparent; }
どうでしょうか。だいぶ印象が変わった気がします。
今回は以上です。