【CSS】トグルスイッチ【HTML】 - 頑張りすぎず頑張ろう

index.html【三色のトグルスイッチ】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMLとCSS3で作るトグルスイッチ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="toggle-switch">
<input type="checkbox" id="toggle" class="button" />
<label for="toggle" class="border">toggle button</label>
</div>
<div class="toggle-switch gold">
<input type="checkbox" id="toggle1" class="button" />
<label for="toggle1" class="border">toggle button</label>
</div>
<div class="toggle-switch green">
<input type="checkbox" id="toggle2" class="button" />
<label for="toggle2" class="border">toggle button</label>
</div>
</body>
</html>

style.css

body {
margin: 0;
padding: 20px;
}

.toggle-switch {
margin-bottom: 5px;
}

.border {
position: relative;
background: #2B2D42;
width: 100px;
height: 50px;
display: block;
border-radius: 25px;
cursor: pointer;
text-indent: -9999px;
}

.border::after {
position: absolute;
content: "";
width: 40px;
height: 40px;
background: #fff;
top: 5px;
left: 5px;
border-radius: 50%;
transition-duration: 0.2s;
}

.button:checked + .border {
background: #D81543;
}

.button:checked + .border::after {
left: calc(100% - 5px);
transform: translateX(-100%);
}

.button {
display: none;
}

.border:active::after {
width: 60%;
}

.toggle-switch.gold .button:checked + .border {
background: #F2D300;
}

.toggle-switch.green .button:checked + .border {
background: #00A468;
}