Opening Hours Reveal
店舗案内CTAをホバーすると、営業中の時間帯が折りたたみ式パネルで現れる。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：使用対象: button ／ 動き: reveal
21 items条件に一致する公開素材
Liquid Ring Button
ボタン内の小さな円が背景全体に広がる水滴状のホバー。ブランドサイトに。
Chevron Curtain Action
左右のシェブロン形状が開いて文字を強調。採用ページやサービス案内の主ボタンに。
Action Route Button
ボタンの下に出発点から次のステップまでの小さな経路が現れる。申し込み導線に進行感を付けます。
Shortcut Keycap CTA
詳細を開くCTAの横からキーボードショートカットが展開。業務アプリの操作を視覚的に案内します。
Folded Action Bar
見積もりCTAの折りたたまれた案内帯がホバー時に開き、所要時間を伝えます。
Pricing Meter CTA
見積もりボタンをホバーすると下部の料金メーターが展開し、料金の目安を提示。
Hotline Number Reveal
電話番号付きの問い合わせCTA。ホバーすると受付時間と番号が水平に展開し、押せる領域を保持。
Stacked Choice CTA
一つのボタンに重なるアクションラベルがずれて、詳細な目的を表示する多層CTA。
Stitched Edge Travel CTA
旅の予約ボタンを囲う破線ステッチがスライドし、目的地タグが横から現れる。旅行・イベント向け。
Barcode Scan Ticket
チケット購入の導線で、バーコード上を走査線が横切り、右端の入場矢印が出現するホバー。
Step Indicator Button
CTAの下にある3段階のステップ目盛りが順番に点灯し、次の工程を視覚的に伝えるボタン。
Notched Document CTA
角の切り欠きに書類アイコンが収まり、ホバーで資料の受け取り動作を示すダウンロードボタン。
Notched Price Capsule
価格とアクションを分けた切り欠き型ボタン。ホバーで価格帯が浮き上がり、予約などへ誘導。
Ribbon Price Action
購入・申込ボタンの端から小さな価格リボンが現れ、ホバー時だけ補足情報を示します。
Envelope Seal Reveal
封筒のフラップが開き、問い合わせのアイコンが顔を出すメール誘導ボタン。
Arrow Pocket Release
小さなポケットに収まった矢印がスリットを通って外側へ進み、リンクの方向を示す。
Double Gate Reveal
ボタンの二枚のシャッターが上下に開き、中央のアクセント帯と矢印が現れる。