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

アクションボタン付きアラート

メッセージに加えて行動を促すボタンを含む静止アラート。バージョン更新やキャンペーン告知の誘導に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="alert09-07-08">
          <p class="msg09-07-08">新しいバージョンが利用可能です。</p>
          <span class="btn09-07-08">詳細を見る</span>
        </div>

CSS

.d09-07-08 .alert09-07-08{
          display:flex;
          align-items:center;
          justify-content:space-between;
          gap:14px;
          width:100%;
          max-width:280px;
          padding:14px 16px;
          background:#f5f3ff;
          border:1px solid #ddd6fe;
          border-radius:8px;
          font-family:sans-serif;
        }
        .d09-07-08 .msg09-07-08{
          margin:0;
          font-size:12.5px;
          line-height:1.5;
          color:#5b21b6;
        }
        .d09-07-08 .btn09-07-08{
          flex-shrink:0;
          padding:6px 12px;
          background:#7c3aed;
          border-radius:6px;
          font-size:11.5px;
          color:#fff;
          white-space:nowrap;
        }

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