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

例えばリンクを表示したいけれど、

  • テキストリンクだと何か地味
  • どうせなら目立たせたい
  • そうだ！ボタン風にしよう

こういう感じでボタン風のリンクを作りたくなることは多々あります。

そこでCSSのみでリンクをボタン風に改造する方法＆コード例をまとめました。

リンクをボタン風にする手順

では早速リンクをボタン風に改造する方法を詳解

と言っても次みたいに専用のボタン要素とCSSを追加するだけです。

 

まず次みたいに専用クラス名を割り振ったリンク要素を作成

ここでは btn-style-link  というクラス名を付けてます。

別に btn-link  でも link-btn  でもいいんですが、それだと「アレ？これってリンク風のボタン？それともボタン風のリンク？」とかなって滅茶苦茶ややこしいです。

なので少しくどいけど、あえて分かりやすい名前にしてます。

 

そうしたらこのボタンに対して次のようなCSSを追加・適用

上のコードをそのままコピペすれば、立派なリンク風ボタンの完成です。

ちなみに、このCSSで特に大事なのは次の部分

  • display: inline-block;
    リンクの幅を自由に変更できるようにインラインブロックとして設定
  • text-decoration: none;
    リンク特有のホバーしたときの下線を消している
  • border: 1px;
    ボタンっぽく見えるように輪郭線をつけている
  • box-shadow: 0px 2px 4px #575;
    立体感を付けるために右方向に2px、ぼかし半径4pxで影を付けている

リンクとボタンは全く別物のように感じますが、CSSを少し追加するだけでリンクっぽさを消したり、逆にボタンっぽさを演出したりも可能です。

 

ちなみに出来上がったリンク風ボタンは次のような見た目

▼実際に作成したリンク風ボタンの例

背景色は薄いグリーン色、影もそれに合わせて若干緑がかった色にしてます。

色とかパディングについてはお好きなようにカスタマイズしてみてください。

上の例だと背景色が薄くて文字が見にくいので、
背景色はなるべくなら濃い色にすると見やすくなるはずです。

リンク風ボタンを親要素幅いっぱいに広げるには

今紹介したリンク風ボタンは display: inline-block;  を付与したので、幅の自由変更も可能です。

例えば親要素に対して幅いっぱいに広げるなんてことができるようになります。

そのやり方はさっきのCSSに width  プロパティを追加するだけ

この時の注意点は、左右のパディングを引いた幅を設定する必要があるということ

上の例だと左パディング = 24px 、 右パディング =  24px  なので、 width: calc(100% - 48px);  と指定してあげないと親要素からはみ出てしまうので要注意です。

ボタンホバー時にアニメ効果を付けるには

このリンク風ボタンにはホバー時にアニメ効果を付けたりもできます。

例えばホバー時に浮かび上がるようなアニメ効果を付けるやり方は次の通り

 

まずさっきのCSSを次のように改変します。（ハイライトした部分に注目！）

transition: box-shadow .3s;  というのが新しく追加した箇所

これはボタンが別の状態に移った場合に、 box-shadow  プロパティの値を 0.3秒 かけてアニメーションして遷移させるという命令になります。

ここでは影をアニメさせますが、別に他のプロパティでも構いません。

 

そうしたらボタンがホバーされた時に適用したいCSSを追加

皆さんご存知のように hover疑似要素（ :hover  ）を使えばホバー時専用のCSSが適用可能

それを利用してボックスシャドウの影とぼかし半径を変更してます。

これでホバー時に浮かび上がるようなボタン風リンクの完成です。

 

実際にホバーしてみたときの様子が次画像

▼ボタン風リンクにホバーしたときの動作例

分かりにくいですが、影が強調されるので浮かび上がっているように見えます。

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

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

このブログでもリンクやボタンのカスタマイズ術を解説してるので、最後に関連記事として紹介します。

 

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

PisukeCode - Web開発まとめ
 
CSSで外部リンクに "別タブで開く" アイコンを付ける方法＆コード例
https://pisuke-code.com/css-how-to-add-icon-to-ext-link
外部リンクに target="_blank"  をつけて別タブで開く場合、アイコン（  << 例えばこんなのとか ）をつけると普通のリンクと区別がついて分かりやすくなります。そこでCSSで外部リンクにアイコンを付ける方法とコード例をまとめました。またjQueryを使って動的にアイコン付与する方法も最後に紹介します。CSSで外部リンクに別タブで開くアイコンを付ける手順ここでは Font Awesome 5 を使って適当なアイコンを探し、外部リンクにアイコン表示しようと思います。その手順を大まかにまとめると次の通りです。１．FontAwe...
PisukeCode - Web開発まとめ
CSSで訪問済みやホバー時のリンク色を変えるテクニックまとめ
https://pisuke-code.com/css-link-color-with-pseudo-class
リンクの色はデフォルトだとブラウザ固有のものが使われます。あるいはWordPressなどのCMSを使っているなら、テーマとかで統一された色です。でも一部のリンクではホバー時や訪問済みの色を変えたいこともありますよね。そこでここではCSSだけでリンク色を変えるテクニックについてまとめました。訪問済みのリンク色を変える訪問済みリンク色はデフォルトだと青紫みたいな色この色を変えるには :visited  疑似クラスを使います。その名の通り訪問済み(visited)な要素に対してCSSを適用するクラスです。 例えば次のようなリンクタ...
PisukeCode - Web開発まとめ
 
CSSでボタンをリンク風に改造する方法＆コード例【コピペOK】
https://pisuke-code.com/css-way-to-make-link-style-button
ボタンをリンク風の見た目に改造・・・普通に考えれば「リンク要素をそのまま使えばいいじゃん」となります。でもボタンの機能を保ったままリンク風にしたいという場合もあるんですよね。あとボタンをリンク風に見せる技術はWordPressとかのCMSでもよく見かけます。そういう意味ではリンク風ボタンは意外と日常的に目にしてるのかもしれません。ということで、リンク風ボタンをCSSで作る方法とコード例についてまとめてみました。リンク風ボタンの超簡単な作り方手順ボタンをリンク風に改造するときに考えないといけないのは次のような...

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

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

ここまでのまとめ

以上、CSSだけでできるボタン風リンクの作り方でした。

リンクを目立たせたいときに使えるテクニックかな、と思います。ではでは($・・)/~~~ﾊﾞｲﾊﾞｲ

関連記事