body { width: 150px; margin: 10px; font-family: sans-serif; background-color: #292A2D; } .toggleTitle { height: 15px; font-size: smaller; color: white; font-weight: bold; float: left; margin-right: 30px; width: 80px; } .toggle { position: relative; display: inline-block; width: 35px; height: 15px; top: 2px; } .toggle input { display: none; } .slider { position: absolute; cursor: pointer; inset: 0; background-color: #444746; border: 1px solid #8E918F; border-radius: 999px; transition: background-color 0.1s; } .slider::before { content: ""; position: absolute; height: 72%; width: 27%; background-color: #8E918F; border-radius: 50%; top: 12%; left: 9%; transition: transform 0.1s; } .toggle input:checked+.slider { background-color: #A8C7FA; } .toggle input:checked+.slider::before { transform: translateX(200%); background-color: #062E6F; }