基本的にはコピペで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.
コメント ※ハンドルネームでお願いします