コピペで使えるCSSデザインレシピ集 Vol.3｜リンク編

ページ内には広告が含まれます広告ポリシー

下線、矢印、背景色、ホバーアニメーションを使ったリンクデザインを紹介します。本文中のリンクや関連記事への導線に使いやすい作例を集めました。

コピペで使えるCSSリンクデザイン

CSSデザインレシピ集では、CodePenからHTMLとCSSをコピーして使えるデザインを集めました。

リンクのデザインは、サンプルのHTMLを参考に、リンク先や文字を入れ替え、CSSを加えるだけで変更できます。通常のHTMLサイトとWordPressのどちらでも使えるので、本文中のリンクや関連記事への導線に取り入れてください。

リンクデザインの使い方

使いたいデザインが見つかったら、見本のHTMLからリンク部分を、CSSからリンクに使われている部分をコピーします。HTMLへ付いているクラス名と、CSSのクラス名が同じになるように使います。

各デザインはCodePenで表示しています。HTMLとCSSをクリックすると、コードが表示されます。

CodePenでSCSSやLessを通常のCSSへ変換して表示する手順 — SCSS・Lessを通常のCSSへ変換する手順

サイトにもともとCSSや余白が設定されている場合は、見本と少し違う表示になることがあります。CSSを追加したあとは、実際のページで前後の文章との間隔も確認しておくと安心です。

CSSリンクデザイン

左から下線が伸びるリンク

カーソルを重ねると、リンクの左端から下線が伸びるデザインです。CSSが短く、本文中のリンクやメニューにも加えやすくなっています。

See the Pen Simple Link Hover Effect using HTML and CSS by @T3chnician on CodePen.

.hover-link::afterのbackground: #FFFを変えると下線の色が、height: 2pxを変えると下線の太さが変わります。線が伸びる速さは、同じセレクタにあるtransition: width .3sで変更できます。

中央から下線が広がるリンク

リンクの中央から左右へ向かって下線が広がります。中央揃えのメニューや、横並びにしたナビゲーションにも合うデザインです。

See the Pen Animated Underline Hover by @jstn on CodePen.

a:afterのbackground: #fffを変えると下線の色が、height: 2pxを変えると下線の太さが変わります。広がる速さは、同じセレクタにある2つの0.3sで変更できます。

背景色が下から広がるリンク

通常時は細い下線を表示し、カーソルを重ねると背景色が文字の後ろまで広がります。文章の中へ入れてもリンクの場所がわかりやすいデザインです。

See the Pen Link hover effect with box-shadow by @donroyco on CodePen.

aのbox-shadow: inset 0 -1px 0 rgba(211, 47, 47, 0.6)を変えると通常時の下線が、a:hoverのbox-shadow: inset 0 -23px 0 rgba(211, 47, 47, 0.6)を変えるとカーソルを重ねたときの背景が変わります。

矢印が右へ動くリンク

リンクの右側に矢印を置き、カーソルを重ねると少し右へ移動させるデザインです。関連記事や別ページへ進むリンクに使えます。

See the Pen Moving arrow when hovering link by @hellohely on CodePen.

.link-arrow:hover pのtransform: translateX(50%)を変えると矢印が移動する距離が変わります。動く速さは、.link-arrow pにあるtransition: 0.1s ease-inで変更できます。

背景が下線と矢印に変わるリンク

通常時はリンクの背景へ色を付け、カーソルを重ねると細い下線と矢印へ変化します。本文の流れを崩さず、リンクへ少し大きな動きを加えられます。

See the Pen Link Hover Arrow Idea by @gabriellewee on CodePen.

#0077ffは、背景・下線・矢印を作る複数のセレクタで使われています。これらを同じ色へ変更すると、背景・下線・矢印の色をまとめて変えられます。a:hover:beforeのtransform: scaleY(.18)を変えると、カーソルを重ねたときに残る下線の太さが変わります。

「Click me!」が現れるリンク

カーソルを重ねると、リンクの上へ「Click me!」の文字が現れます。短いリンクや、クリックしてほしい場所を楽しく見せたい場合に合います。

See the Pen Click Me! Link Hover Effect by @jhancock532 on CodePen.

.link::beforeのcontent: "Click"と、.link:afterのcontent: "me!"を変えると表示する文字が変わります。文字の背景色は、両方のセレクタにあるbackground: blackから変更できます。

波線が描かれるリンク

カーソルを重ねると、リンクの下へ波線が左から描かれます。通常の直線とは違う、やわらかい印象の下線を付けられます。

See the Pen CSS wavy underline animation #1 by @gojanedoe on CodePen.

HTML内にあるpathのstroke="#ffdede"を変えると波線の色が、stroke-width="3px"を変えると波線の太さが変わります。線が描かれる速さは、.lineのtransition: stroke-dashoffset 1s easeで変更できます。

四隅の線が画面へ広がるリンク

大きなリンクへカーソルを重ねると、右上と左下にある線が画面へ向かって広がります。ページの入口や、特に目立たせたいリンクに使えるデザインです。

See the Pen Hover animation (before / after) by @pmalexis on CodePen.

h1:beforeのborder-right-color: #000とborder-top-color: #000を変えると右上の線の色が変わります。左下の線は、h1:afterのborder-left-color: #000とborder-bottom-color: #000から変更できます。線が広がる速さは、h1:afterとh1:beforeにあるtransition-duration: .7sで変更できます。