パーツ番号 01-03-05 ・ CSSのみ

大見出しCTAフッター

大きな見出しとボタンで行動を促すCTAフッター。見出しの文字にグラデーションが流れ続けます。WordPressのお問い合わせ誘導に効果的です。

autocss

プレビュー

ソースコード

HTML

<footer class="d01-03-05-ft">
          <p class="d01-03-05-lead">Let's build together.</p>
          <h2 class="d01-03-05-big">一緒に作りませんか?</h2>
          <a href="#" class="d01-03-05-btn">プロジェクトを相談する</a>
          <div class="d01-03-05-copy">&copy; 2026 Create Lab</div>
        </footer>

CSS

.d01-03-05-ft{background:#0e0e15;color:#cbd5e1;text-align:center;padding:24px 18px;box-sizing:border-box;height:100%;display:flex;flex-direction:column;justify-content:center;gap:12px}
        .d01-03-05-lead{color:#818cf8;font-size:11px;letter-spacing:2px;margin:0}
        .d01-03-05-big{margin:0;font-size:24px;font-weight:800;line-height:1.2;background:linear-gradient(90deg,#f472b6,#818cf8,#38bdf8,#f472b6);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:d155flow 5s linear infinite}
        @keyframes d155flow{from{background-position:0% 50%}to{background-position:300% 50%}}
        .d01-03-05-btn{display:inline-block;align-self:center;padding:9px 22px;border-radius:30px;background:#fff;color:#0e0e15;font-size:11px;font-weight:700;text-decoration:none;transition:transform .25s,box-shadow .25s}
        .d01-03-05-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(129,140,248,.5)}
        .d01-03-05-copy{color:#52525b;font-size:10px;margin-top:4px}

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