Dual-Track Outline CTA
上下二本の線が逆方向へ走り、控えめながら輪郭が際立つ企業サイト向けボタン。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：技術: css
300 items条件に一致する公開素材
Folded Action Bar
見積もりCTAの折りたたまれた案内帯がホバー時に開き、所要時間を伝えます。
Location Maplist Hover
所在地リンクに合わせて小さな位置マーカーが上下に移動するアクセス案内メニュー。
Side Note Paragraph
記事本文の注釈リンクにカーソルを乗せると、欄外の短い補足説明を引き出せます。
Baseline Echo Headline
太い見出しの下に小さな復唱テキストが現れ、背景ラインが移動する演出。
Studio Contact Print
写真作品にホバーすると暗室のコンタクトプリント風の余白と撮影番号が現れます。
Color Lab Sample Scan
素材見本の半透明な色版が移動し、ベース素材と仕上げ色を比較できるホバー。
Warranty Slip Reveal
商品カードの下から保証・配送条件の明細が出現し、購入前の安心材料を提示します。
Editorial Pullquote Lift
記事の引用カードをホバーすると、引用元と参照リンクがスライドして現れます。
Project Stage Menu
制作工程メニューの行ホバーで工程の短い説明と進行方向が表示されます。
Search Scope Hint
サイト内検索の入力欄にホバーすると検索範囲のヒントが現れ、フォーカス時も操作できます。
Shield Check Reveal
セキュリティ確認用シールドアイコンがチェック状態に変わり、意味をテキストで補足するホバー。
Pricing Meter CTA
見積もりボタンをホバーすると下部の料金メーターが展開し、料金の目安を提示。
Ink Wash Text Mask
文字の内部だけをインクが左から満たすように変色。見出しや強調リンクに利用。
Stacked Annotation Headline
見出しの上に重ねた小さな注釈がホバーで持ち上がり、章題を際立たせる。
Macro Detail Band
商品写真の中央にだけ拡大した細部を重ねるホバー。素材や質感の紹介に。
Print Corner Curl
写真プリントの隅がめくれ、撮影情報が裏面から現れるホバー。
Hotline Number Reveal
電話番号付きの問い合わせCTA。ホバーすると受付時間と番号が水平に展開し、押せる領域を保持。