こんにちは。KOUKIです。
表題の通り、CSSのスタイルのみで、Buttonの押した感を出す方法について記事にしました。デモ用のボタンを以下に設置しています。
Discover our tours
カーソルをボタンの上に置いたり、ボタンを押してみたりしてください。
ソースコード
ソースコードは以下の通りです。
|
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 |
<style> .btn:link, .btn:visited { text-transform: uppercase; text-decoration: none; padding: 15px 40px; display: inline-block; border-radius: 100px; transition: all .2s; } .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,.2); } .btn:active { transform: translateY(-1px); box-shadow: 0 5px 10px rgba(0,0,0,.2); } .btn-green { background-color: green; color: #fff; } /* end of button */ </style> <a href="#" class="btn btn-green">Discover our tours</a> |
パラメータを変えれば、色々なボタンを作成することが可能です！
終わりに
CSSは面白いですよね^^
もっとたくさん、ストックを蓄えたいと思います!
にほんブログ村
最近のコメント