[CSS] 簡単！テキストリンク hover時のデザイン

基本的にはコピペでOK！CSSのみで出来るテキストリンクのhover(マウスを乗せた時）のデザインをいくつかご紹介します。ちょっと自分好みにカスタマイズするだけで、ガラリと見栄えが変わります。

CSSだけでいろいろ出来るって楽しいですね！

コードの確認方法

テキストリンクのコードの記入は、Codepenを使って表示しています。[Result]画面では、実際にマウスを乗せて変化を確認する事が出来ます。

[SCSS]のタブがあります。それぞれコードが書かれています。SCSSではなくCSSで確認したい場合は、下の方に[View Compiled]というボタンがあります。そこをクリックすると、CSSのコードを確認できます。後は、コピペして使ってください。

一部、アイコンにFont Awesome　を使用しています。 使い方は、Font Awesomeアイコンの使い方の応用 でご紹介しています。

hoverで、>>の矢印が動く

丁度良い程度のアニメーションだと思います。

See the Pen text link (type arrow) by cocotiie (@cocotiie) on CodePen.

hoverでハイライト

左から右へ、マーカーで引いた様なデザインです。カラーコードは、Color Names　で確認できます。

See the Pen text link (underline disappear) by cocotiie (@cocotiie) on CodePen.

hoverでアンダーライン　左から

See the Pen text link (underline) by cocotiie (@cocotiie) on CodePen.

hoverでアンダーライン　中央から

See the Pen text link (underline middle) by cocotiie (@cocotiie) on CodePen.

hoverでアンダーライン　消える

@melnik909さんのコードを初心者向け？に、ちょっと変えました。

See the Pen text link (underline disappear) by cocotiie (@cocotiie) on CodePen.

hoverでハイライトが矢印に変化

なかなか面白いデザインです。@gabrielleweeさんのコードから<a>要素だけを抜き取りました。色の設定が複雑で美しく作られています。お気に入りです。

See the Pen text link (arrow) by cocotiie (@cocotiie) on CodePen.

hoverで一言メッセージを表示

See the Pen text link (message) by cocotiie (@cocotiie) on CodePen.

スタイリッシュにアイコンが伸びる

@kathykatoさんのコードです。使いたいなーと思って紹介しました。カッコイイ感じですね。カスタマイズにはある程度の知識が必要かも。初心者には少しハードルが高いかもしれません。

See the Pen Button Hover by Katherine Kato (@kathykato) on CodePen.