Back to CSS Banners & Alerts Semantic Bootstrap-style Alerts CSS Pure CSS
Share
HTML 
<section class="ba-bts" aria-label="Semantic Bootstrap-style alerts demo">
  <p class="ornament">— Status Indicators —</p>

  <div class="alert alert--success" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Success</div>
        <div class="alert-title">Payment processed successfully.</div>
        <div class="alert-body-text">Your subscription has been activated. A receipt has been sent to your registered email address. Changes take effect immediately.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">View Receipt</button>
          <button class="btn-ghost" type="button">Dismiss</button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert--danger" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Error</div>
        <div class="alert-title">Unable to save your changes.</div>
        <div class="alert-body-text">A conflict was detected with an existing record. Please refresh the page and try again. If this persists, contact our support team with error code <strong>ERR_409</strong>.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">Try Again</button>
          <button class="btn-ghost" type="button">Contact Support</button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert--warning" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Warning</div>
        <div class="alert-title">Your storage is at 87% capacity.</div>
        <div class="alert-body-text">You are approaching your plan limit. Automatic uploads may pause if usage exceeds 95%. Consider upgrading your plan or removing unused files to avoid disruption.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">Upgrade Plan</button>
          <button class="btn-ghost" type="button">Manage Storage</button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert--info" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Information</div>
        <div class="alert-title">A new version is available — v4.2.0.</div>
        <div class="alert-body-text">This release includes performance improvements, 3 new API endpoints, and resolved a known issue with date parsing in multi-timezone environments.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">View Changelog</button>
          <button class="btn-ghost" type="button">Update Later</button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert--neutral" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="12" x2="16" y2="12"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Notice</div>
        <div class="alert-title">This environment is read-only.</div>
        <div class="alert-body-text">You are currently viewing a staging snapshot. Any edits made here will not be persisted. Switch to the production environment to save changes.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">Switch to Production</button>
          <button class="btn-ghost" type="button">Learn More</button>
        </div>
      </div>
    </div>
  </div>
</section>
CSS 
/* ─── 03 Semantic Bootstrap-style Alerts — botanical ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Instrument+Sans:wght@400;500;600&display=swap');

.ba-bts {
  --ba-bts-sage-bg: #f0f4ef; --ba-bts-sage-border: #7aad6d; --ba-bts-sage-text: #2d5a27; --ba-bts-sage-icon: #4e9040; --ba-bts-sage-fill: #e6f0e4;
  --ba-bts-ember-bg: #fdf3ef; --ba-bts-ember-border: #d4704a; --ba-bts-ember-text: #7a2a10; --ba-bts-ember-icon: #c05530; --ba-bts-ember-fill: #fce8e1;
  --ba-bts-amber-bg: #fdf8ec; --ba-bts-amber-border: #c8982a; --ba-bts-amber-text: #6b4a00; --ba-bts-amber-icon: #b88020; --ba-bts-amber-fill: #faf0d0;
  --ba-bts-slate-bg: #eff3f8; --ba-bts-slate-border: #5b88c0; --ba-bts-slate-text: #1a3a60; --ba-bts-slate-icon: #3d6fa0; --ba-bts-slate-fill: #e2eaf5;
  --ba-bts-neutral-bg: #f7f5f2; --ba-bts-neutral-border: #9b9288; --ba-bts-neutral-text: #3d3830; --ba-bts-neutral-icon: #7a7068; --ba-bts-neutral-fill: #eeebe7;
  --ba-bts-page-bg: #faf8f4;

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--ba-bts-page-bg);
  background-image: radial-gradient(circle at 15% 50%, rgba(122,173,109,0.07) 0%, transparent 50%), radial-gradient(circle at 85% 20%, rgba(91,136,192,0.07) 0%, transparent 40%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  gap: 14px;
  font-family: 'Instrument Sans', sans-serif;
  box-sizing: border-box;
}
.ba-bts *, .ba-bts *::before, .ba-bts *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-bts .alert { width: 100%; max-width: 640px; border-radius: 3px; position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; animation: ba-bts-rise 0.5s ease both; }
.ba-bts .alert:nth-child(1) { animation-delay: 0.05s; } .ba-bts .alert:nth-child(2) { animation-delay: 0.12s; } .ba-bts .alert:nth-child(3) { animation-delay: 0.19s; } .ba-bts .alert:nth-child(4) { animation-delay: 0.26s; } .ba-bts .alert:nth-child(5) { animation-delay: 0.33s; }
.ba-bts .alert:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(0,0,0,0.07); }
@keyframes ba-bts-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ba-bts .alert-inner { display: flex; gap: 0; position: relative; }
.ba-bts .alert-flora { width: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 20px 0; }
.ba-bts .alert-flora::after { content: ''; position: absolute; right: 0; top: 16px; bottom: 16px; width: 1px; background: currentColor; opacity: 0.2; }
.ba-bts .alert-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.6); border: 1.5px solid currentColor; flex-shrink: 0; }
.ba-bts .alert-icon svg { width: 16px; height: 16px; }
.ba-bts .alert-content { flex: 1; padding: 18px 20px 18px 16px; }
.ba-bts .alert-status { font-size: 9px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 5px; opacity: 0.7; display: flex; align-items: center; gap: 8px; }
.ba-bts .alert-status::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.2; max-width: 40px; }
.ba-bts .alert-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; line-height: 1.25; margin-bottom: 5px; }
.ba-bts .alert-body-text { font-size: 13px; line-height: 1.7; opacity: 0.75; max-width: 480px; }
.ba-bts .alert-actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.ba-bts .btn-primary { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border: 1.5px solid currentColor; background: transparent; cursor: pointer; border-radius: 2px; transition: all 0.2s; }
.ba-bts .btn-ghost { font-family: inherit; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 0; border: none; background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; opacity: 0.55; transition: opacity 0.2s; }
.ba-bts .btn-ghost:hover { opacity: 1; }

.ba-bts .alert--success { background: var(--ba-bts-sage-bg); border: 1.5px solid var(--ba-bts-sage-border); border-left: 4px solid var(--ba-bts-sage-border); color: var(--ba-bts-sage-text); }
.ba-bts .alert--success .alert-flora { background: var(--ba-bts-sage-fill); color: var(--ba-bts-sage-icon); }
.ba-bts .alert--success .alert-icon { color: var(--ba-bts-sage-icon); border-color: var(--ba-bts-sage-icon); }
.ba-bts .alert--success .btn-primary { color: var(--ba-bts-sage-text); border-color: var(--ba-bts-sage-border); }
.ba-bts .alert--success .btn-primary:hover { background: var(--ba-bts-sage-border); color: white; }
.ba-bts .alert--success .btn-ghost { color: var(--ba-bts-sage-text); }

.ba-bts .alert--danger { background: var(--ba-bts-ember-bg); border: 1.5px solid var(--ba-bts-ember-border); border-left: 4px solid var(--ba-bts-ember-border); color: var(--ba-bts-ember-text); }
.ba-bts .alert--danger .alert-flora { background: var(--ba-bts-ember-fill); color: var(--ba-bts-ember-icon); }
.ba-bts .alert--danger .alert-icon { color: var(--ba-bts-ember-icon); border-color: var(--ba-bts-ember-icon); }
.ba-bts .alert--danger .btn-primary { color: var(--ba-bts-ember-text); border-color: var(--ba-bts-ember-border); }
.ba-bts .alert--danger .btn-primary:hover { background: var(--ba-bts-ember-border); color: white; }
.ba-bts .alert--danger .btn-ghost { color: var(--ba-bts-ember-text); }

.ba-bts .alert--warning { background: var(--ba-bts-amber-bg); border: 1.5px solid var(--ba-bts-amber-border); border-left: 4px solid var(--ba-bts-amber-border); color: var(--ba-bts-amber-text); }
.ba-bts .alert--warning .alert-flora { background: var(--ba-bts-amber-fill); color: var(--ba-bts-amber-icon); }
.ba-bts .alert--warning .alert-icon { color: var(--ba-bts-amber-icon); border-color: var(--ba-bts-amber-icon); }
.ba-bts .alert--warning .btn-primary { color: var(--ba-bts-amber-text); border-color: var(--ba-bts-amber-border); }
.ba-bts .alert--warning .btn-primary:hover { background: var(--ba-bts-amber-border); color: white; }
.ba-bts .alert--warning .btn-ghost { color: var(--ba-bts-amber-text); }

.ba-bts .alert--info { background: var(--ba-bts-slate-bg); border: 1.5px solid var(--ba-bts-slate-border); border-left: 4px solid var(--ba-bts-slate-border); color: var(--ba-bts-slate-text); }
.ba-bts .alert--info .alert-flora { background: var(--ba-bts-slate-fill); color: var(--ba-bts-slate-icon); }
.ba-bts .alert--info .alert-icon { color: var(--ba-bts-slate-icon); border-color: var(--ba-bts-slate-icon); }
.ba-bts .alert--info .btn-primary { color: var(--ba-bts-slate-text); border-color: var(--ba-bts-slate-border); }
.ba-bts .alert--info .btn-primary:hover { background: var(--ba-bts-slate-border); color: white; }
.ba-bts .alert--info .btn-ghost { color: var(--ba-bts-slate-text); }

.ba-bts .alert--neutral { background: var(--ba-bts-neutral-bg); border: 1.5px solid var(--ba-bts-neutral-border); border-left: 4px solid var(--ba-bts-neutral-border); color: var(--ba-bts-neutral-text); }
.ba-bts .alert--neutral .alert-flora { background: var(--ba-bts-neutral-fill); color: var(--ba-bts-neutral-icon); }
.ba-bts .alert--neutral .alert-icon { color: var(--ba-bts-neutral-icon); border-color: var(--ba-bts-neutral-icon); }
.ba-bts .alert--neutral .btn-primary { color: var(--ba-bts-neutral-text); border-color: var(--ba-bts-neutral-border); }
.ba-bts .alert--neutral .btn-primary:hover { background: var(--ba-bts-neutral-border); color: white; }
.ba-bts .alert--neutral .btn-ghost { color: var(--ba-bts-neutral-text); }

.ba-bts .ornament { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; color: #bbb; text-align: center; letter-spacing: 0.1em; }

@media (prefers-reduced-motion: reduce) { .ba-bts .alert { animation: none; } }