リンクテキストをお洒落に装飾するCSSを紹介

ほぼコピペで使えるシンプルなコード集です。使いたい人はご自由にどうぞ。 リンクテキストを装飾するCSSを色々作ってみました。実用性を考えたので、そこまで派手なアニメーションをするものはありません。リンクはページ内で重要な役割を担っているので、過度なアニメーションは控えたほうが無難です。

文字色をふんわりと変化

See the Pen GJjbjJ by Setoda Kouki (@LeoTiger) on CodePen.

マウスオーバー時に文字色を変えるのは基本中の基本ですが、変化終了までに0.3秒の時間を与えるだけで印象が変わります。

背景色と文字色をふんわりと変化

See the Pen VLKONR by Setoda Kouki (@LeoTiger) on CodePen.

さっきのコードに背景色の変化も加えました。背景は柔らかい印象を与えるために角丸に。

ニュルッと出てくる下線

See the Pen MwjdZo by Setoda Kouki (@LeoTiger) on CodePen.

ただの下線だと味気ないので、擬似要素とか色々使ってアニメーションさせてみました。コードは少し複雑になっていますが。

傾くテキスト

See the Pen XbjwOV by Setoda Kouki (@LeoTiger) on CodePen.

3度傾けただけです。

震えるテキスト

See the Pen YXGboM by Setoda Kouki (@LeoTiger) on CodePen.

以前に記事で紹介した、マウスオーバー時に要素を震えさせるコードを使っています。

リンク先を表示するツールチップ

See the Pen aOmrPG by Setoda Kouki (@LeoTiger) on CodePen.

content: attr(href);でリンク先のURLを取得し、右上にツールチップ風に表示させてみました。ちょっとゴチャゴチャした印象ですが、JSを使わなくてもCSSだけでここまで出来るというのが面白いです。

---

他にも「回転するテキスト」や「ズームインしてくるテキスト」、「光るテキスト」等も作れるんですが、正直どれも見辛い+クリックできる場所なのか意外と分かりづらいので使わないほうが無難です。カッコいいんですけどね…

あと、今回作成したコードは全てFirefoxのみで動作を確認しています。ベンダープレフィックスは付けていないので、実装するときは注意してください。