CSSでボタンをリンク風に改造する方法&コード例【コピペOK】

ボタンをリンク風の見た目に改造・・・
普通に考えれば「リンク要素をそのまま使えばいいじゃん」となります。

でもボタンの機能を保ったままリンク風にしたいという場合もあるんですよね。あとボタンをリンク風に見せる技術はWordPressとかのCMSでもよく見かけます。

そういう意味ではリンク風ボタンは意外と日常的に目にしてるのかもしれません。

ということで、リンク風ボタンをCSSで作る方法とコード例についてまとめてみました。

リンク風ボタンの超簡単な作り方手順

ボタンをリンク風に改造するときに考えないといけないのは次のようなこと

  • ボタン特有の枠線や背景を消す
  • リンク的なテキスト色・下線をつける

この2つさえできてしまえば、ボタンをリンク風に改造するのは簡単です。

そのやり方は次の通り

 

まず次のようなリンク風ボタン用のCSSを用意

セレクタ名は分かりやすく .link-style-btn  としてます。

もちろん .link-btn  とかの名前でもいいですが・・・・・・それだと後で「これってボタン風のリンク?それともリンク風のボタン?」とかなって滅茶苦茶ややこしいので、無難な名前にしてます。

CSS自体は枠線とか背景を消して、ホバー時の疑似要素を定義してるだけなので特に説明することなし。本当にそのままコピペでOKです。

 

そうしたら後はリンク化したボタンにCSSクラスを付与してあげるだけ

例えば次みたいな感じで

これだけでリンク風のボタンの出来上がりです。

 

実際にどういう見た目になるかというと、次の画像の通り

リンク風ボタンの例 - リンク風なのでボタンとしての機能は残っている

テキスト色はリンクと分かるように青色にしてみました。まあ別に青じゃなくてもいいんですが、リンク風ボタンはWordPressとかでも青色なのでそれを合わせてます。

もちろんリンク風の見た目とは言え、ボタンとしての機能はちゃんと健在です。

 

あとボタンにホバーしたときの見た目は次のような感じ

リンク風ボタンにホバーしたときの様子 - ホバー時だけ下線を追加するとリンクらしさが倍増

ホバー時に下線が付くと、よりリンクらしさが倍増します。

ちなみにbootstrapを使っている場合は

もしWeb開発で bootstrap を使っているなら・・・

面倒なCSSを追加しなくても簡単にリンク風ボタンが作れます。

 

そのやり方はボタン要素に btn btn-link  というクラスを付与するだけ

例えば次がそのHTML例

たったこれだけでリンク風ボタンになります。

bootstrapを使ってるなら、こっちの方法の方が百倍楽ですね。

 

ちなみにボタンの見た目は次画像のような感じ

bootstrapを使って作ったリンク風ボタンの例(通常時)

さっきCSS追加で作ったボタンをほとんど見た目は同じです。(違いは色が若干薄いくらい)

 

そして、次がマウスでホバーした時の見た目

bootstrapを使って作ったリンク風ボタンの例(マウスホバー時)

こっちも下線が付いてリンクらしくなります。

リンク・ボタンのカスタマイズ向け関連記事

今紹介したリンク風ボタンみたいに、リンク・ボタンはカスタマイズ頻度が高いです。

なので、リンク・ボタンのカスタマイズ術を最後に関連記事として紹介します。

 

特に開発の場で役立つのは、次記事で紹介したテクニック

リンクとかボタンのデザインを整えたり、目立たせたりするのに有効です。

ちなみに最後の記事はここで解説したのとは真逆で、リンクをボタン風に見せるテクニックを解説します。もし興味のある方はそちらもご覧ください。

ここまでのまとめ

以上、CSSでリンク風ボタンを作る手順についてでした。

ボタンの機能を残したままリンクの見た目にしたいときは、この方法が便利だと思います。

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください