Webdesign lernen JavaScript

Cookie Banner selbst erstellen.

Ein einfaches Cookie Banner mit HTML, CSS und JavaScript: Hinweis einblenden, Buttons einbauen und die Auswahl des Nutzers mit localStorage speichern – ideal für eigene Webseiten und WordPress.

Von Eduard Wischnewski, Webdesigner · aktualisiert am

Cookie-Banner selbst erstellen mit HTML, CSS und JavaScript

In diesem Tutorial lernst du, wie du ein einfaches Cookie Banner selbst erstellst und mit HTML, CSS und JavaScript umsetzt. Du erfährst, wie du den Hinweis einblendest, Buttons einbaust und die Auswahl des Nutzers mit localStorage speicherst. Ideal für eigene Webseiten, kleinere Projekte und WordPress.

Was ist ein Cookie Banner?

Ein Cookie Banner informiert Besucher darüber, dass deine Webseite Cookies verwendet. In vielen Fällen muss der Nutzer aktiv zustimmen oder ablehnen, bevor bestimmte Funktionen oder Tracking-Dienste geladen werden. Deshalb ist ein Cookie Banner auf vielen Webseiten ein wichtiger Bestandteil.

Ein einfaches Banner ist besonders für Lernzwecke gut geeignet, weil du damit HTML, CSS und JavaScript in einem praktischen Beispiel kombinieren kannst.

html
<div class="cookie-banner" id="cookieBanner">
  <div class="cookie-banner-content">
    <p>Diese Webseite verwendet Cookies, um die Nutzererfahrung zu verbessern.</p>
    <div class="cookie-banner-buttons">
      <button id="cookieAccept">Akzeptieren</button>
      <button id="cookieDecline">Ablehnen</button>
    </div>
  </div>
</div>

Das Banner besteht aus einem Container, einem kurzen Text und zwei Buttons. Mit dem einen Button kann der Nutzer zustimmen, mit dem anderen ablehnen.

html
<style>
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: #111;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
.cookie-banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-banner-buttons {
  display: flex;
  gap: 10px;
}
.cookie-banner button {
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
#cookieAccept {
  background: #00b894;
  color: #fff;
}
#cookieDecline {
  background: #636e72;
  color: #fff;
}
.cookie-banner.hidden {
  display: none;
}
@media (max-width: 768px) {
  .cookie-banner-content {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

Mit CSS platzierst du das Banner fest am unteren Rand und gestaltest es optisch passend für deine Webseite. Durch das responsive Styling sieht es auch auf kleineren Bildschirmen gut aus.

html
<script>
document.addEventListener('DOMContentLoaded', () => {
  const banner = document.getElementById('cookieBanner');
  const acceptBtn = document.getElementById('cookieAccept');
  const declineBtn = document.getElementById('cookieDecline');
  const consent = localStorage.getItem('cookieConsent');
  if (consent === 'accepted' || consent === 'declined') {
    banner.classList.add('hidden');
  }
  acceptBtn.addEventListener('click', () => {
    localStorage.setItem('cookieConsent', 'accepted');
    banner.classList.add('hidden');
  });
  declineBtn.addEventListener('click', () => {
    localStorage.setItem('cookieConsent', 'declined');
    banner.classList.add('hidden');
  });
});
</script>

Das JavaScript prüft beim Laden der Seite, ob bereits eine Entscheidung gespeichert wurde. Wenn ja, wird das Banner nicht mehr angezeigt. Beim Klick auf einen der Buttons wird die Auswahl in localStorage gespeichert und das Banner ausgeblendet.

So funktioniert localStorage

localStorage speichert Daten direkt im Browser des Nutzers. Dadurch bleibt die Entscheidung auch dann erhalten, wenn die Seite neu geladen oder später erneut besucht wird.

In diesem Beispiel speicherst du den Wert accepted oder declined. So kann das Banner beim nächsten Besuch automatisch ausgeblendet werden.

Dienste erst nach Zustimmung laden

Ein Banner allein reicht nicht – entscheidend ist, dass Tracking oder externe Inhalte wirklich erst nach dem Klick auf „Akzeptieren“ geladen werden. Das geht mit einer kleinen Funktion, die du nach der Zustimmung aufrufst:

js
function loadOptionalScripts() {
  // Beispiel: Statistik-Skript erst nach Zustimmung einbinden
  const s = document.createElement('script');
  s.src = 'https://example.com/statistik.js';
  s.defer = true;
  document.head.appendChild(s);
}

if (localStorage.getItem('cookieConsent') === 'accepted') {
  loadOptionalScripts();
}
// …und zusätzlich im Klick-Handler von „Akzeptieren“ aufrufen

Komplettes Beispiel

html
<div class="cookie-banner" id="cookieBanner">
  <div class="cookie-banner-content">
    <p>Diese Webseite verwendet Cookies, um die Nutzererfahrung zu verbessern.</p>
    <div class="cookie-banner-buttons">
      <button id="cookieAccept">Akzeptieren</button>
      <button id="cookieDecline">Ablehnen</button>
    </div>
  </div>
</div>
<style>
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: #111;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
.cookie-banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-banner-buttons {
  display: flex;
  gap: 10px;
}
.cookie-banner button {
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
#cookieAccept {
  background: #00b894;
  color: #fff;
}
#cookieDecline {
  background: #636e72;
  color: #fff;
}
.cookie-banner.hidden {
  display: none;
}
@media (max-width: 768px) {
  .cookie-banner-content {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const banner = document.getElementById('cookieBanner');
  const acceptBtn = document.getElementById('cookieAccept');
  const declineBtn = document.getElementById('cookieDecline');
  const consent = localStorage.getItem('cookieConsent');
  if (consent === 'accepted' || consent === 'declined') {
    banner.classList.add('hidden');
  }
  acceptBtn.addEventListener('click', () => {
    localStorage.setItem('cookieConsent', 'accepted');
    banner.classList.add('hidden');
  });
  declineBtn.addEventListener('click', () => {
    localStorage.setItem('cookieConsent', 'declined');
    banner.classList.add('hidden');
  });
});
</script>

Dieses Beispiel zeigt den kompletten Aufbau eines einfachen Cookie Banners mit HTML, CSS und JavaScript. Du kannst es direkt auf deiner Webseite verwenden und bei Bedarf an dein Design anpassen.

Cookie Banner an dein Design anpassen

Du kannst Farben, Abstände, Schriftarten und Position ganz einfach ändern. Wenn dein Webdesign eher hell ist, kannst du auch einen hellen Hintergrund verwenden. Wichtig ist, dass das Banner gut sichtbar bleibt und sich optisch sauber in deine Seite einfügt – prüfe die Farben am besten mit meinem Farbkontrast-Checker.

Warum dieses Beispiel gut für Anfänger ist

Dieses Beispiel ist bewusst einfach gehalten. Es zeigt dir die wichtigsten Grundlagen, ohne unnötig kompliziert zu sein. Du lernst dabei den Umgang mit HTML-Struktur, CSS-Layout und JavaScript-Logik in einem praktischen Projekt.

Fazit

Mit wenigen Zeilen Code kannst du ein funktionales Cookie Banner selbst erstellen. Das Beispiel eignet sich gut als Startpunkt für eigene Webseiten und hilft dir dabei, HTML, CSS und JavaScript in einem realen Projekt zu kombinieren.

Wenn du möchtest, kannst du später weitere Funktionen ergänzen, zum Beispiel zusätzliche Auswahlmöglichkeiten, ein schöneres Design oder eine WordPress-Integration.

So testest du dein Cookie Banner

  1. Binde den HTML-, CSS- und JavaScript-Code in deine Seite ein.
  2. Lade die Seite im Browser und prüfe, ob das Banner sichtbar ist.
  3. Klicke auf einen der Buttons und kontrolliere, ob das Banner verschwindet.
  4. Lade die Seite neu und teste, ob die gespeicherte Auswahl erhalten bleibt.

Hinweis: Die rechtlichen Anforderungen hängen von den eingesetzten Tools und Cookies ab. Dieses Tutorial zeigt die technische Umsetzung eines einfachen Cookie-Banners und ersetzt keine Rechtsberatung.

Weiterlernen

Das Layout des Banners baust du mit CSS Flexbox, die Farben prüfst du mit dem Farbkontrast-Checker. In WordPress bindest du das Banner am besten über ein Child Theme ein. Auch der Dark Mode Toggle speichert die Auswahl in localStorage – das Prinzip ist dasselbe. Und deine Formulare schützt du ebenfalls ohne externe Dienste: mit dem Contact Form 7 Spam-Schutz ohne Captcha.

Du brauchst ein Banner, das zu deinen eingesetzten Diensten passt? Ich setze es dir im Rahmen von Programmierung und Webseiten-Betreuung um.

FAQ: Cookie Banner

Häufige Fragen zum selbst erstellten Cookie Banner

Wann braucht eine Webseite ein Cookie Banner?

Ein Cookie Banner wird häufig verwendet, wenn auf einer Webseite Cookies oder ähnliche Technologien für Analyse, Tracking oder Marketing eingesetzt werden. Der Hinweis informiert Besucher und gibt ihnen die Möglichkeit, eine Auswahl zu treffen. Welche Anforderungen im konkreten Fall gelten, hängt von den eingesetzten Tools und Cookies ab.

Was ist der Unterschied zwischen einem Hinweis und einer Einwilligung?

Ein einfacher Hinweis informiert nur über die Verwendung von Cookies. Eine Einwilligung bedeutet, dass der Nutzer aktiv zustimmt, bevor bestimmte Inhalte oder Dienste geladen werden. Ob und wann eine Einwilligung erforderlich ist, hängt vom jeweiligen Einsatz ab.

Kann ich ein eigenes Cookie Banner in WordPress verwenden?

Ja, ein selbst erstelltes Cookie Banner kann auch in WordPress eingebunden werden. Du kannst es direkt im Theme oder Child Theme einsetzen und optisch an dein Projekt anpassen. Die technische Umsetzung bleibt dabei meist gleich.

Wie speichert der Browser die Auswahl des Nutzers?

Die Auswahl kann im Browser über localStorage gespeichert werden. Dadurch bleibt die Entscheidung erhalten, auch wenn die Seite neu geladen oder später erneut besucht wird.

Kann ich das Banner nur auf bestimmten Seiten anzeigen?

Ja, das ist möglich. Du kannst per JavaScript oder WordPress-Bedingungen steuern, auf welchen Seiten das Banner sichtbar ist. Das ist praktisch, wenn du unterschiedliche Inhalte oder Zielseiten hast.

Ist ein Cookie Banner auch für mobile Geräte geeignet?

Ja, mit responsivem CSS kann sich das Banner an Smartphones und Tablets anpassen. So bleibt der Text lesbar und die Buttons sind auch auf kleinen Bildschirmen gut bedienbar.

Kann ich das Design nachträglich ändern?

Ja, Farben, Abstände, Schriftarten, Größe und Position lassen sich jederzeit mit CSS anpassen. Dadurch kannst du das Banner an dein Webdesign anpassen, ohne die Funktion zu verändern.

Worauf sollte ich bei selbst erstellten Lösungen achten?

Bei eigenen Lösungen ist es wichtig, dass das Banner klar verständlich, sauber bedienbar und technisch zuverlässig ist. Außerdem solltest du prüfen, ob es zu den eingesetzten Tools und Inhalten deiner Seite passt.

Passt dazu Weitere Tutorials

Weiter lernen.

Contact Form 7 Botschutz Contact-Form-7-Formular mit drei SPAM-Schutzmethoden: Honeypot, Bot-Checkbox und Time Trap. Zum Tutorial → Theme umschalten Zwischen Hell- und Dunkel-Theme umschalten – Beispiel-Code für Button, Styles und Skript. Zum Tutorial → WordPress Child Theme erstellen Child Theme anlegen, aktivieren und sicher anpassen – ohne Änderungen im Haupttheme zu verlieren. Zum Tutorial →

Keine Zeit, es selbst umzusetzen? Ich baue Ihre Webseite schnell und sauber.

Jetzt kontaktieren