ボタンをリンク風の見た目に改造・・・
普通に考えれば「リンク要素をそのまま使えばいいじゃん」となります。
でもボタンの機能を保ったままリンク風にしたいという場合もあるんですよね。あとボタンをリンク風に見せる技術はWordPressとかのCMSでもよく見かけます。
そういう意味ではリンク風ボタンは意外と日常的に目にしてるのかもしれません。
ということで、リンク風ボタンをCSSで作る方法とコード例についてまとめてみました。
リンク風ボタンの超簡単な作り方手順
ボタンをリンク風に改造するときに考えないといけないのは次のようなこと
- ボタン特有の枠線や背景を消す
- リンク的なテキスト色・下線をつける
この２つさえできてしまえば、ボタンをリンク風に改造するのは簡単です。
そのやり方は次の通り
まず次のようなリンク風ボタン用のCSSを用意
1 2 3 4 5 6 7 8 9 10 | button.link-style-btn{ cursor: pointer; border: none; background: none; color: #0033cc; } button.link-style-btn:hover{ text-decoration: underline; color: #002080; } |
セレクタ名は分かりやすく .link-style-btn としてます。
もちろん .link-btn とかの名前でもいいですが・・・・・・それだと後で「これってボタン風のリンク？それともリンク風のボタン？」とかなって滅茶苦茶ややこしいので、無難な名前にしてます。
CSS自体は枠線とか背景を消して、ホバー時の疑似要素を定義してるだけなので特に説明することなし。本当にそのままコピペでOKです。
そうしたら後はリンク化したボタンにCSSクラスを付与してあげるだけ
例えば次みたいな感じで
1 2 3 | <button class="link-style-btn"> リンクスタイルボタン </button> |
これだけでリンク風のボタンの出来上がりです。
実際にどういう見た目になるかというと、次の画像の通り
テキスト色はリンクと分かるように青色にしてみました。まあ別に青じゃなくてもいいんですが、リンク風ボタンはWordPressとかでも青色なのでそれを合わせてます。
もちろんリンク風の見た目とは言え、ボタンとしての機能はちゃんと健在です。
あとボタンにホバーしたときの見た目は次のような感じ
ホバー時に下線が付くと、よりリンクらしさが倍増します。
ちなみにbootstrapを使っている場合は
もしWeb開発で bootstrap を使っているなら・・・
面倒なCSSを追加しなくても簡単にリンク風ボタンが作れます。
そのやり方はボタン要素に btn btn-link というクラスを付与するだけ
例えば次がそのHTML例
1 2 3 | <button class="btn btn-link"> リンクスタイルボタン </button> |
たったこれだけでリンク風ボタンになります。
bootstrapを使ってるなら、こっちの方法の方が百倍楽ですね。
ちなみにボタンの見た目は次画像のような感じ
さっきCSS追加で作ったボタンをほとんど見た目は同じです。（違いは色が若干薄いくらい）
そして、次がマウスでホバーした時の見た目
こっちも下線が付いてリンクらしくなります。
リンク・ボタンのカスタマイズ向け関連記事
今紹介したリンク風ボタンみたいに、リンク・ボタンはカスタマイズ頻度が高いです。
なので、リンク・ボタンのカスタマイズ術を最後に関連記事として紹介します。
特に開発の場で役立つのは、次記事で紹介したテクニック
リンクとかボタンのデザインを整えたり、目立たせたりするのに有効です。
ちなみに最後の記事はここで解説したのとは真逆で、リンクをボタン風に見せるテクニックを解説します。もし興味のある方はそちらもご覧ください。
ここまでのまとめ
以上、CSSでリンク風ボタンを作る手順についてでした。
ボタンの機能を残したままリンクの見た目にしたいときは、この方法が便利だと思います。
