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

空のカート／リスト

空箱のイラストと「まだ商品がありません」の文言、買い物を続けるCTAを表示。WordPress/WooCommerceのカートが空のときやお気に入りリスト未登録時の画面に使えます。ボタンはホバーで反応します。

hovercss

プレビュー

ソースコード

HTML

<div class="d09-03-08-wrap">
          <svg class="d09-03-08-box" viewBox="0 0 90 78" width="76" height="66" aria-hidden="true">
            <path fill="#e7d7c3" d="M12 30h66l-8 40H20z"/>
            <path fill="#d8c3a8" d="M12 30h66l6-14H6z"/>
            <path fill="#c9b193" d="M45 16v54"/>
            <path fill="none" stroke="#c9b193" stroke-width="2" d="M45 16v54"/>
          </svg>
          <p class="d09-03-08-msg">まだ商品がありません</p>
          <a href="#" class="d09-03-08-btn" onclick="return false">お買い物を続ける</a>
        </div>

CSS

.d09-03-08{background:#fbf9f5}
        .d09-03-08-wrap{text-align:center}
        .d09-03-08-box{animation:d328float 3s ease-in-out infinite}
        @keyframes d328float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
        .d09-03-08-msg{margin:10px 0 16px;color:#8a7d68;font-weight:600;font-size:15px}
        .d09-03-08-btn{display:inline-block;padding:9px 22px;border-radius:8px;background:#c58a4a;color:#fff;font-size:13px;text-decoration:none;transition:background .2s,transform .2s}
        .d09-03-08-btn:hover{background:#a86f34;transform:translateY(-2px)}

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