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

404ページ

大きな「404」の数字がゆらゆら揺れ、下に「トップへ戻る」ボタンを配置。WordPressの 404.php テンプレートにそのまま組み込めるエラー画面です。ボタンはホバーで反応します。

hovercss

プレビュー

ソースコード

HTML

<div class="d09-03-01-wrap">
          <div class="d09-03-01-num">
            <span>4</span><span>0</span><span>4</span>
          </div>
          <p class="d09-03-01-msg">ページが見つかりません</p>
          <a href="#" class="d09-03-01-btn" onclick="return false">トップへ戻る</a>
        </div>

CSS

.d09-03-01{background:#f7f8fb}
        .d09-03-01-wrap{text-align:center}
        .d09-03-01-num{display:flex;justify-content:center;gap:4px;font-weight:800;font-size:76px;line-height:1;color:#2b3a67}
        .d09-03-01-num span{display:inline-block;animation:d321float 2.4s ease-in-out infinite}
        .d09-03-01-num span:nth-child(2){animation-delay:.3s;color:#e8567a}
        .d09-03-01-num span:nth-child(3){animation-delay:.6s}
        @keyframes d321float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
        .d09-03-01-msg{margin:14px 0 18px;color:#66708c;font-size:14px}
        .d09-03-01-btn{display:inline-block;padding:9px 22px;border-radius:999px;background:#2b3a67;color:#fff;font-size:13px;text-decoration:none;transition:transform .2s,background .2s}
        .d09-03-01-btn:hover{background:#e8567a;transform:translateY(-2px)}

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