Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

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

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

INDEX

コードの確認方法

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

[html][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.

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる