パーツ番号 10-05-07 ・ CSSのみ

ログイン促進バナー

「ログインしてすべての機能を利用」と呼びかける横帯バナーです。MemberPressで非ログインユーザーにページ上部から会員登録を促す用途に向いています。

membershipcss

プレビュー

ソースコード

HTML

<div class="d10-05-07-banner">
          <span class="d10-05-07-text">ログインしてすべての機能を利用しましょう</span>
          <button type="button" class="d10-05-07-btn">ログイン</button>
        </div>

CSS

.d10-05-07-banner{
          width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
          background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;
          padding:14px 18px;
        }
        .d10-05-07-text{font-size:12.5px;font-weight:700;color:#3730a3}
        .d10-05-07-btn{
          flex:none;border:none;border-radius:7px;padding:8px 16px;
          background:#4338ca;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;
        }

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