Bento Feature Shift
ベン図風の3パネルがホバーで比率を変え、主役の機能を大きく見せるサービスカード。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
300 items条件に一致する公開素材
Category Counter Flip
カテゴリリンクの件数表示がカードのように裏返り、ページ数・記事数へ視線を導く。
Milestone Stat Ladder
指標カードの3つの数字が順番に持ち上がり、企業実績のまとまりを見せる。
Compass Subnav Marker
メニューの矢印が小さな方位記号へ変わり、見ているセクションを明確に示す。
Form Hint Shelf
入力欄にホバー・フォーカスすると控えめな補助情報が下部の棚から現れる。
SVG Paper Plane Trail
紙飛行機のSVGが曲線の軌道に沿って飛び、問い合わせ導線を印象付ける。
Arrow Pocket Release
小さなポケットに収まった矢印がスリットを通って外側へ進み、リンクの方向を示す。
Split Offset Headline
同じ見出しの上下半分が左右にずれ、文字を変更せずに奥行きのあるホバーを作る。
Dot Matrix Baseline
リンクの文字下にドットが左右へ順番に現れ、読みやすさを保ちながら選択状態を伝える。
Polaroid Note Lift
写真プリントが少し回転して持ち上がると、下に隠れた撮影メモが顔を出す。
Topographic Photo Lines
風景サムネイルに地形図の等高線が重なり、ホバー時に画像の情報レイヤーを演出する。
Exploded Feature Layers
製品を構成する3層のパネルが離れるように広がり、構造と名称を見せるカード。
Offset Hatch CTA
ホバーすると斜線入りのオフセット影がせり出し、ボタン本体の輪郭を強調する。
Metric Donut Trace
実績カードの周囲に円形グラフが描かれ、数値の根拠に視線を集める。
Dotted Leader Directory
目次の項目とページ番号の間にドットリーダーが延び、見ている行を読み取りやすくする。
Axis Rail Menu
縦の座標軸に沿って短い横線がスライドし、選択中メニューを正確に指し示す。
Code Token Annotation
コードの各単語にカーソルを乗せると、構文の役割を示す小さなラベルが浮かぶ。
Iris Shutter Badge
6枚の扇形シャッターが回転して開口部を作る、写真・ギャラリー向けのアイコン。