Home
リンクをテキストリンクではなくボタン風にしたい！
それだけでなくボタンを押したような動きが欲しい！
そんな時はCSS使えば、押した時（クリックした時）にポチって沈むような動きをつけるボタンを作れますよ！
HTML
|
1 |
<p><a class="btn" href="#">ボタン</a></p> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.btn { color: #fff; font-size: 20px; font-weight:bold; border-radius: 5px; text-decoration: none; background: #555; box-shadow: 0 3px #111; position: relative; display: inline-block; top: -2px; padding: 5px 20px; } .btn:hover { box-shadow: 0 1px #111; top: 1px; } |
サンプル
See the Pen
押したった感のあるボタン by kosaeru (@kosaeru)
on CodePen.
まとめ
どうしょうか？ソースコードも少ないので使いやすいですよ。
