Breadcrumb Step Marker
パンくずリストの現在位置へ、控えめなアクセントが現れる。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：用途: navigation
70 items条件に一致する公開素材
Letter Wave Link
文字が一文字ずつ上下し、色が順番に変化するリンク演出。
Link Bracket Reveal
テキストの左右に小さなブラケットが現れ、リンクを強調。
Vertical Nav Rail
サイドナビの左端にインジケーターが滑り込み、選択項目を示す。
Submenu Peek
ホバーまたはキーボード操作で小さなサブメニューが展開する、実務向けのナビゲーション。
Elastic Chevron
小さな矢印が伸び縮みして前進する、案内リンク向けのマイクロアニメーション。
Arrow Pass Through
丸い矢印アイコンが一度外へ抜け、反対側から現れるCTA演出。
Dual-Line Text Flip
文字が上へ抜けると同じ文字が下から入る、行単位の入れ替え演出。
Center Underline Expand
文字下のラインが中央から両側へ伸びるナビゲーション用ホバー。
Nav Background Wipe
メニュー文字の背後にカラー帯が下からせり上がるナビゲーション。
Corner Border Sweep
四隅から細い線が伸びて枠を完成させる、控えめなCTAホバー。
Navigation Focus Pill
背景の丸いハイライトが広がり、テキストリンクを柔らかく強調。
Icon Quarter Turn
矢印アイコンを円形の中で90度回転させ、方向転換を示す演出。
Underline Draw
中央から下線が伸びる。文字中心のデザインに適しています。
Letter Spacing
文字間をわずかに広げ、文字主体のUIに小さな変化を加えます。
Arrow Motion
文字は固定し、矢印だけ動かす。情報設計上の意味が明確な演出です。