パーツ番号 01-02-09 ・ CSSのみ

パルス強調CTAボックス

枠が波紋のように外へ広がり続けて視線を集めるCTAボックス。コンバージョンを狙う問い合わせ・予約ボタンの強調に効果的です。

css

プレビュー

ソースコード

HTML

<div class="d01-02-09-box">
          <span class="d01-02-09-ring"></span>
          <span class="d01-02-09-ring d01-02-09-r2"></span>
          <div class="d01-02-09-inner">
            <h4 class="d01-02-09-title">お問い合わせはこちら</h4>
            <a href="#" class="d01-02-09-btn" onclick="return false">今すぐ相談する</a>
          </div>
        </div>

CSS

.prev.d01-02-09{background:#fef2f2}
        .d01-02-09-box{position:relative;display:flex;align-items:center;justify-content:center}
        .d01-02-09-ring{position:absolute;inset:0;border-radius:18px;border:2px solid #f43f5e;animation:d01-02-09-pulse 2.4s ease-out infinite}
        .d01-02-09-r2{animation-delay:1.2s}
        @keyframes d01-02-09-pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}
        .d01-02-09-inner{position:relative;z-index:2;background:#fff;border-radius:18px;padding:28px 30px;text-align:center;box-shadow:0 12px 30px rgba(244,63,94,.2)}
        .d01-02-09-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:16px}
        .d01-02-09-btn{display:inline-block;padding:12px 28px;border-radius:999px;background:linear-gradient(90deg,#f43f5e,#fb7185);color:#fff;font-weight:800;font-size:14px;text-decoration:none;transition:transform .2s ease}
        .d01-02-09-btn:hover{transform:scale(1.05)}

クラス名 .d01-02-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。