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

シンプル下部固定スナックバー

画面下部中央に短いメッセージだけを表示する最小構成のスナックバー静止見本。コピー完了やちょっとした操作結果の通知デザイン確認に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="snack09-14-01">
          <span>リンクをコピーしました</span>
        </div>

CSS

.d09-14-01{
          background:#f8fafc;
        }
        .d09-14-01 .snack09-14-01{
          position:absolute;
          left:50%;
          bottom:20px;
          transform:translateX(-50%);
          padding:11px 20px;
          background:#1e293b;
          border-radius:8px;
          font-family:sans-serif;
          font-size:13px;
          color:#f8fafc;
          white-space:nowrap;
          box-shadow:0 8px 20px rgba(15,23,42,.25);
        }

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