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

オフライン表示

雲に斜線が引かれた断線アイコンと「接続がありません」の文言、再読み込みボタンを表示。WordPressサイトの通信エラー時やオフライン用フォールバック画面に使えます。ボタンはホバーで反応します。

hovercss

プレビュー

ソースコード

HTML

<div class="d09-03-06-wrap">
          <svg class="d09-03-06-icon" viewBox="0 0 90 70" width="76" height="60" aria-hidden="true">
            <path fill="#cdd3e2" d="M68 54H24a16 16 0 01-3-31.7A22 22 0 0163 26.5 14 14 0 0168 54z"/>
            <line x1="30" y1="18" x2="62" y2="52" stroke="#e0698a" stroke-width="5" stroke-linecap="round"/>
          </svg>
          <p class="d09-03-06-msg">接続がありません</p>
          <button type="button" class="d09-03-06-btn">再読み込み</button>
        </div>

CSS

.d09-03-06{background:#f6f7fa}
        .d09-03-06-wrap{text-align:center}
        .d09-03-06-icon{animation:d326fade 2.6s ease-in-out infinite}
        @keyframes d326fade{0%,100%{opacity:1}50%{opacity:.55}}
        .d09-03-06-msg{margin:10px 0 16px;color:#5c6480;font-weight:600;font-size:15px}
        .d09-03-06-btn{padding:9px 22px;border:1px solid #c3c9dd;border-radius:999px;background:#fff;color:#5c6480;font-size:13px;cursor:pointer;transition:background .2s,color .2s}
        .d09-03-06-btn:hover{background:#5c6480;color:#fff;border-color:#5c6480}

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