Segmented Arrow Launch
斜めに分割したボタンの矢印パネルが滑り、文字側との重なりが反転する。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：使用対象: button ／ 動き: slide
24 items条件に一致する公開素材
Opening Hours Reveal
店舗案内CTAをホバーすると、営業中の時間帯が折りたたみ式パネルで現れる。
Chevron Curtain Action
左右のシェブロン形状が開いて文字を強調。採用ページやサービス案内の主ボタンに。
Shortcut Keycap CTA
詳細を開くCTAの横からキーボードショートカットが展開。業務アプリの操作を視覚的に案内します。
Dual-Track Outline CTA
上下二本の線が逆方向へ走り、控えめながら輪郭が際立つ企業サイト向けボタン。
Folded Action Bar
見積もりCTAの折りたたまれた案内帯がホバー時に開き、所要時間を伝えます。
Hotline Number Reveal
電話番号付きの問い合わせCTA。ホバーすると受付時間と番号が水平に展開し、押せる領域を保持。
Stacked Choice CTA
一つのボタンに重なるアクションラベルがずれて、詳細な目的を表示する多層CTA。
Stitched Edge Travel CTA
旅の予約ボタンを囲う破線ステッチがスライドし、目的地タグが横から現れる。旅行・イベント向け。
Barcode Scan Ticket
チケット購入の導線で、バーコード上を走査線が横切り、右端の入場矢印が出現するホバー。
Sliding Latch CTA
鍵のスライド解除を模した二段階ボタン。会員入口や予約開始への誘導に使えるホバー。
Notched Document CTA
角の切り欠きに書類アイコンが収まり、ホバーで資料の受け取り動作を示すダウンロードボタン。
Offset Capsule Slider
二重のカプセル輪郭が逆方向にずれ、中央の申込ボタンを軽やかに際立たせる演出。
Split-Pill Direction CTA
左右に分かれたピル形ボタンがホバー時に展開し、行き先を示す矢印が前へ移動します。
Sliding Measurement CTA
計測目盛りが伸び、数値が更新されたように見える設計資料向けCTA。
Parallel Arrow Rails
2本の平行レール上をアイコンがすれ違うように移動する、資料・詳細リンク向けボタン。
Tapered Ribbon Action
ボタンの両端にリボン状の折り返しが現れ、行動を促すラベルをすっきり強調。
Arrow Pocket Release
小さなポケットに収まった矢印がスリットを通って外側へ進み、リンクの方向を示す。