Notched Document CTA
角の切り欠きに書類アイコンが収まり、ホバーで資料の受け取り動作を示すダウンロードボタン。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：使用対象: button
47 items条件に一致する公開素材
Offset Capsule Slider
二重のカプセル輪郭が逆方向にずれ、中央の申込ボタンを軽やかに際立たせる演出。
Notched Price Capsule
価格とアクションを分けた切り欠き型ボタン。ホバーで価格帯が浮き上がり、予約などへ誘導。
Perimeter Trace CTA
四辺を走る細いラインがボタンの輪郭を順番に描く、落ち着いた資料請求CTA。
Ribbon Price Action
購入・申込ボタンの端から小さな価格リボンが現れ、ホバー時だけ補足情報を示します。
Split-Pill Direction CTA
左右に分かれたピル形ボタンがホバー時に展開し、行き先を示す矢印が前へ移動します。
Sliding Measurement CTA
計測目盛りが伸び、数値が更新されたように見える設計資料向けCTA。
Envelope Seal Reveal
封筒のフラップが開き、問い合わせのアイコンが顔を出すメール誘導ボタン。
Parallel Arrow Rails
2本の平行レール上をアイコンがすれ違うように移動する、資料・詳細リンク向けボタン。
Tapered Ribbon Action
ボタンの両端にリボン状の折り返しが現れ、行動を促すラベルをすっきり強調。
Arrow Pocket Release
小さなポケットに収まった矢印がスリットを通って外側へ進み、リンクの方向を示す。
Offset Hatch CTA
ホバーすると斜線入りのオフセット影がせり出し、ボタン本体の輪郭を強調する。
Punch Card Perforation
半券風のボタンの切り取り線がホバーで強調され、右側のチェックマークが浮かぶ。
Double Gate Reveal
ボタンの二枚のシャッターが上下に開き、中央のアクセント帯と矢印が現れる。
Download Label Split
ダウンロードボタンの右側が開き、ファイル形式と矢印が現れる。資料配布で役立つ演出。
Prism Edge CTA
ホバーした瞬間に多色の輪郭が巡る、落ち着いたダーク系CTA。通常時は控えめな細い枠です。
Twin Arrow Exchange
ボタンの前後に置いた2本の矢印が入れ替わり、次のページへ進む動きを視覚的に伝える。
Orbit Dot CTA
丸いCTAにマウスを乗せると、小さなドットがボタンの外周を半周して矢印へ合流する演出。