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

成功カラーのトースト通知

緑色でまとめたチェックアイコン付き成功トーストの静止見本。フォーム送信や自動保存が成功した瞬間の見た目確認に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="toast09-14-03">
          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4"><circle cx="12" cy="12" r="9"></circle><path d="M8 12.5l2.6 2.6L16 9.5"></path></svg>
          <span>保存が完了しました</span>
        </div>

CSS

.d09-14-03{
          background:#f8fafc;
        }
        .d09-14-03 .toast09-14-03{
          position:absolute;
          left:50%;
          bottom:20px;
          transform:translateX(-50%);
          display:flex;
          align-items:center;
          gap:10px;
          padding:12px 18px;
          background:#16a34a;
          border-radius:8px;
          font-family:sans-serif;
          font-size:13px;
          color:#fff;
          white-space:nowrap;
          box-shadow:0 10px 22px rgba(22,163,74,.35);
        }
        .d09-14-03 .toast09-14-03 svg{
          width:17px;
          height:17px;
          flex-shrink:0;
        }

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