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が適用可能

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

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

 

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

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

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

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

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

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

 

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

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

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

ここまでのまとめ

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

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

CSS

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

コメントを残す

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

CAPTCHA


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