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

テキストリンク

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

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

コードの確認方法

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

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

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

hoverで、>>の矢印が動く

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

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

hoverでハイライト

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

See the Pen text link (hover marker) 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 KKaXzwV by cocotiie (@cocotiie) on CodePen.

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

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

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

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


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