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

グラデーションCTAバナー

動くグラデ背景に見出しとボタンを配置。画面内に入るとせり上がって表示され、LPやランディングの主役CTAに使えます。

scrollcss

プレビュー

ソースコード

HTML

<div class="d01-02-01-banner io-reveal">
          <p class="d01-02-01-lead">今だけ、すべてのプランが半額</p>
          <h4 class="d01-02-01-title">春の新生活応援キャンペーン</h4>
          <a href="#" class="d01-02-01-btn" onclick="return false">無料で今すぐ始める</a>
        </div>

CSS

.prev.d01-02-01{background:#0f172a}
        .d01-02-01-banner{position:relative;width:100%;max-width:340px;padding:34px 28px;border-radius:18px;text-align:center;color:#fff;overflow:hidden;background:linear-gradient(120deg,#7c3aed,#ec4899,#f59e0b,#7c3aed);background-size:300% 300%;animation:d01-02-01-flow 8s ease infinite;box-shadow:0 18px 40px rgba(124,58,237,.35);opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
        .d01-02-01-banner.is-in{opacity:1;transform:translateY(0)}
        .d01-02-01-lead{font-size:12px;letter-spacing:.08em;opacity:.9;margin-bottom:8px}
        .d01-02-01-title{font-size:22px;font-weight:800;line-height:1.35;margin-bottom:18px}
        .d01-02-01-btn{display:inline-block;padding:12px 26px;border-radius:999px;background:#fff;color:#7c3aed;font-weight:700;font-size:14px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
        .d01-02-01-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.25)}
        @keyframes d01-02-01-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

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