CSS Banners & Alerts 04 / 14

CSS Cookie Consent Banner Bottom

A bottom CSS cookie consent banner in a luxury Art Deco aesthetic — obsidian background, gold gradient top rule, diagonal corner motifs, and a smooth slide-up entrance animation.

Best forGDPR compliance, premium brand sites, luxury e-commerce, regulatory cookie disclosure.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="ba-cok" aria-label="Cookie consent banner demo">
  <span class="bg-text" aria-hidden="true">Privacy</span>
  <div class="page-center">
    <span class="ornament">⬥ ◇ ⬥</span>
    <p>The consent banner appears from the bottom of the demo on load. Use Accept All or Decline Non-Essential to dismiss.</p>
  </div>

  <div class="consent-banner" data-ba-cok-banner role="dialog" aria-label="Cookie consent">
    <div class="consent-frame">
      <div class="consent-inner">
        <div class="consent-left">
          <div class="consent-eyebrow">
            <span class="consent-eyebrow-line" aria-hidden="true"></span>
            <span class="consent-eyebrow-text">Privacy &amp; Cookies</span>
            <span class="consent-eyebrow-line" aria-hidden="true"></span>
          </div>
          <div class="consent-title">We value your privacy.</div>
          <div class="consent-body">
            We use cookies to personalise content, measure audience, and improve your experience. By accepting, you consent to our use of cookies as described in our <a href="#">Cookie Policy</a> and <a href="#">Privacy Notice</a>. You may withdraw consent at any time.
          </div>
          <div class="consent-tabs">
            <label class="consent-tab required"><input type="checkbox" checked disabled> Essential</label>
            <label class="consent-tab"><input type="checkbox" data-ba-cok-pref="analytics"> Analytics</label>
            <label class="consent-tab"><input type="checkbox" data-ba-cok-pref="marketing"> Marketing</label>
            <label class="consent-tab"><input type="checkbox" data-ba-cok-pref="personal"> Personalisation</label>
          </div>
        </div>
        <div class="consent-right">
          <button class="btn-accept" type="button" data-ba-cok-accept>Accept All</button>
          <button class="btn-decline" type="button" data-ba-cok-decline>Decline Non-Essential</button>
        </div>
      </div>
      <div class="consent-divider" aria-hidden="true"></div>
      <div class="consent-footer">
        <span class="consent-footer-text">GDPR · CCPA · ePrivacy Directive compliant</span>
        <span class="consent-deco">Preference Centre</span>
      </div>
    </div>
  </div>
</section>
/* ─── 04 Cookie Consent Banner — luxury Art Deco ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Jost:wght@300;400;500;600&display=swap');

.ba-cok {
  --ba-cok-obsidian: #0a0a0a;
  --ba-cok-onyx: #141414;
  --ba-cok-gold: #c9a84c;
  --ba-cok-gold-lite: #e2c880;
  --ba-cok-gold-dim: #8a6e30;
  --ba-cok-ivory: #f5f0e8;
  --ba-cok-ivory-dim: rgba(245,240,232,0.55);
  --ba-cok-rule: rgba(201,168,76,0.25);

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--ba-cok-obsidian);
  background-image: radial-gradient(ellipse 60% 35% at 50% 0%, rgba(201,168,76,0.06) 0%, transparent 60%), repeating-linear-gradient(45deg, transparent 0px, transparent 24px, rgba(255,255,255,0.008) 24px, rgba(255,255,255,0.008) 25px);
  font-family: 'Jost', sans-serif;
  color: var(--ba-cok-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.ba-cok *, .ba-cok *::before, .ba-cok *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-cok .bg-text { position: absolute; font-family: 'Libre Baskerville', serif; font-size: clamp(80px, 14vw, 160px); font-style: italic; color: rgba(201,168,76,0.04); letter-spacing: -0.02em; white-space: nowrap; user-select: none; pointer-events: none; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ba-cok .page-center { text-align: center; z-index: 1; padding: 40px 20px 200px; }
.ba-cok .page-center p { font-family: 'Libre Baskerville', serif; font-size: clamp(13px, 2vw, 15px); font-style: italic; color: var(--ba-cok-ivory-dim); line-height: 1.8; max-width: 380px; margin: 0 auto; }
.ba-cok .ornament { display: block; text-align: center; color: var(--ba-cok-gold); font-size: 24px; letter-spacing: 0.3em; margin-bottom: 20px; opacity: 0.7; }

.ba-cok .consent-banner { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; transform: translateY(100%); animation: ba-cok-slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards; }
@keyframes ba-cok-slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ba-cok .consent-banner.dismissed { animation: ba-cok-slideDown 0.5s cubic-bezier(0.4, 0, 1, 1) forwards; pointer-events: none; }
@keyframes ba-cok-slideDown { from { transform: translateY(0); } to { transform: translateY(110%); } }
.ba-cok .consent-frame { background: var(--ba-cok-onyx); border-top: 1px solid var(--ba-cok-rule); position: relative; overflow: hidden; }
.ba-cok .consent-frame::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--ba-cok-gold-dim) 20%, var(--ba-cok-gold) 50%, var(--ba-cok-gold-dim) 80%, transparent 100%); }
.ba-cok .consent-inner { max-width: 1100px; margin: 0 auto; padding: 28px 32px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.ba-cok .consent-left { display: flex; flex-direction: column; gap: 10px; }
.ba-cok .consent-eyebrow { display: flex; align-items: center; gap: 10px; }
.ba-cok .consent-eyebrow-line { width: 28px; height: 1px; background: var(--ba-cok-gold); opacity: 0.5; }
.ba-cok .consent-eyebrow-text { font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ba-cok-gold); opacity: 0.8; }
.ba-cok .consent-title { font-family: 'Libre Baskerville', serif; font-size: 19px; font-weight: 700; color: var(--ba-cok-ivory); line-height: 1.25; }
.ba-cok .consent-body { font-size: 12.5px; line-height: 1.75; color: var(--ba-cok-ivory-dim); max-width: 560px; }
.ba-cok .consent-body a { color: var(--ba-cok-gold-lite); text-decoration: none; border-bottom: 1px solid rgba(201,168,76,0.35); transition: border-color 0.2s; }
.ba-cok .consent-tabs { display: flex; gap: 0; margin-top: 6px; border: 1px solid var(--ba-cok-rule); width: fit-content; border-radius: 2px; overflow: hidden; flex-wrap: wrap; }
.ba-cok .consent-tab { display: flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ba-cok-ivory-dim); cursor: pointer; background: transparent; border-right: 1px solid var(--ba-cok-rule); transition: all 0.2s; }
.ba-cok .consent-tab:last-child { border-right: none; }
.ba-cok .consent-tab input[type="checkbox"] { width: 11px; height: 11px; accent-color: var(--ba-cok-gold); cursor: pointer; }
.ba-cok .consent-tab:hover { background: rgba(201,168,76,0.06); color: var(--ba-cok-ivory); }
.ba-cok .consent-tab.required { color: rgba(201,168,76,0.6); pointer-events: none; }
.ba-cok .consent-right { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 180px; }
.ba-cok .btn-accept { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 13px 24px; background: var(--ba-cok-gold); color: var(--ba-cok-obsidian); border: none; cursor: pointer; transition: all 0.25s ease; }
.ba-cok .btn-accept:hover { background: var(--ba-cok-gold-lite); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(201,168,76,0.35); }
.ba-cok .btn-decline { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 24px; background: transparent; color: var(--ba-cok-ivory-dim); border: 1px solid rgba(245,240,232,0.15); cursor: pointer; transition: all 0.25s ease; }
.ba-cok .btn-decline:hover { border-color: rgba(245,240,232,0.35); color: var(--ba-cok-ivory); background: rgba(245,240,232,0.04); }
.ba-cok .consent-divider { height: 1px; background: var(--ba-cok-rule); margin: 0 32px; }
.ba-cok .consent-footer { padding: 10px 32px; max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.ba-cok .consent-footer-text { font-size: 10px; color: rgba(245,240,232,0.3); letter-spacing: 0.06em; }
.ba-cok .consent-deco { color: rgba(201,168,76,0.3); font-size: 10px; letter-spacing: 0.15em; }

@media (max-width: 640px) {
  .ba-cok .consent-inner { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; }
  .ba-cok .consent-right { flex-direction: row; min-width: unset; }
  .ba-cok .btn-accept, .ba-cok .btn-decline { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .ba-cok .consent-banner { animation: none; transform: translateY(0); } }
(() => {
  const root = document.querySelector('.ba-cok');
  if (!root) return;
  const banner = root.querySelector('[data-ba-cok-banner]');
  if (!banner) return;
  const dismiss = () => banner.classList.add('dismissed');
  root.addEventListener('click', (e) => {
    if (e.target.closest('[data-ba-cok-accept]')) { dismiss(); return; }
    if (e.target.closest('[data-ba-cok-decline]')) {
      root.querySelectorAll('[data-ba-cok-pref]').forEach((c) => { c.checked = false; });
      dismiss();
    }
  });
})();

More from CSS Banners & Alerts

CSS Pulsing Banner for Live UpdatesMinimalist Border Left CSS AlertResponsive Full Width Hero Banner CSSMaterial Design Floating Alert CardCSS Text Wrap Banner with Long StringsDismissible CSS Alert with Close ButtonSticky Top Announcement Banner CSSCSS Alert Banner with Icon AlignmentCSS Toast Notification Alert Top RightCSS Banner with Diagonal Slash BackgroundCSS Gradient Animated Border AlertSemantic Bootstrap-style Alerts CSS
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →