Checkbox Schalter mit CSS erstellen

In dieser CSS Anleitung schauen wir uns mal eine neue Methode an mit der man die HTML Checkbox Funktion designmässig ein wenig aufpeppen kann. Anstatt es dieses Kästchen ist das man Anhäckeln kann oder nicht, kann man auch ganze Schalter daraus bauen. Und hier zeige ich euch wie es geht.

Video

HTML

<div class="field-group">
        <input type="checkbox" name="checkbox" id="instagram" class="checkbox-field">
        <label for="instagram" class="checkbox-label">Instagram</label>
    </div>
    <div class="field-group">
        <input type="checkbox" name="checkbox" id="Tiktok" class="checkbox-field">
        <label for="Tiktok" class="checkbox-label">Tiktok</label>
    </div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #020100;
}

.field-group {
    width: 200px;
}
.checkbox-field {
    opacity: 0;
}

.checkbox-label {
    display:inline-block;
    width: 100%;
    padding: 10px 20px;
    background: #235789;
    border: 2px solid #fff;
    font-size: 1.4em;
    color: #d1d1d1;
    text-align: center;
}

.checkbox-label:hover {
    background: #f1d302;
    color: #000;
}

.checkbox-field:checked + .checkbox-label {
    background: #c1292e;
    color: #fff;
}

Nun wünsche ich euch viel Spass mit eurer neuen Checkbox Schalterfunktion.