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.
Grundstruktur des Cookie Banners
<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.
Cookie Banner mit CSS gestalten
<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.
Cookie Banner mit JavaScript steuern
<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 speichern wir den Wert accepted oder declined. So kann das Banner beim nächsten Besuch automatisch ausgeblendet werden.
Komplettes Beispiel
<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.
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
- Binde den HTML-, CSS- und JavaScript-Code in deine Seite ein.
- Lade die Seite im Browser und prüfe, ob das Banner sichtbar ist.
- Klicke auf einen der Buttons und kontrolliere, ob das Banner verschwindet.
- 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.