【コピペで完成】HTML・CSSのみで作るおしゃれなトグルボタンのデザイン4選

シンプルなトグルボタン

iOS風

非アクティブ時の色：#dddddd
アクティブ時の色：#4bd865
アニメーションありなし

iPhoneで採用されているトグルボタンを再現してみました。ラベルを置く場合、ユーザーの視線移動を考慮して左側に置くのがおすすめです。

<label class="toggle-button-001">
    <input type="checkbox"/>
</label>

.toggle-button-001 {
    display: inline-block;
    position: relative;
    width: 100px;
    height: 50px;
    border-radius: 50px;
    background-color: #dddddd;
    cursor: pointer;
    transition: background-color .4s;
}

.toggle-button-001:has(:checked) {
    background-color: #4bd865;
}

.toggle-button-001::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    background-color: #fff;
    content: '';
    transition: left .4s;
}

.toggle-button-001:has(:checked)::after {
    left: 50px;
}

.toggle-button-001 input {
    display: none;
}

iOS風(背景細め)

非アクティブ時の色：#dddddd
アクティブ時の色：#4bd865
アニメーションありなし

<label class="toggle-button-003">
    <input type="checkbox"/>
</label>

.toggle-button-003 {
    display: flex;
    align-items: center;
    position: relative;
    width: 100px;
    height: 25px;
    margin-top: 12.5px;
    border-radius: 50px;
    background-color: #dddddd;
    cursor: pointer;
    transition: background-color .4s;
}

.toggle-button-003:has(:checked) {
    background-color: #4bd865;
}

.toggle-button-003::after {
    position: absolute;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    background: #fff;
    content: '';
    transition: left .4s;
}

.toggle-button-003:has(:checked)::after {
    left: 50px;
}

.toggle-button-003 input {
    display: none;
}

iOS風(縁あり)

非アクティブ時の色：#dddddd
アクティブ時の色：#4bd865
アニメーションありなし

<label class="toggle-button-002">
    <input type="checkbox"/>
</label>

.toggle-button-002 {
    display: inline-block;
    position: relative;
    width: 100px;
    height: 50px;
    border-radius: 50px;
    border: 3px solid #dddddd;
    box-sizing: content-box;
    cursor: pointer;
    transition: border-color .4s;
}

.toggle-button-002:has(:checked) {
    border-color: #4bd865;
}

.toggle-button-002::after {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #dddddd;
    content: '';
    transition: left .4s;
}

.toggle-button-002:has(:checked)::after {
    left: 50px;
    background-color: #4bd865;
}

.toggle-button-002 input {
    display: none;
}

文字付きのトグルボタン

Yes・No

「No」の色：#ff8d8d
「Yes」の色：#75bbff
アニメーションありなし

質問やアンケートなどで使えそうな、Yes・Noを切り替えるトグルボタン。文字と色のおかげで非常に視認性が高いです。

<label class="toggle-button-004">
    <input type="checkbox"/>
</label>

.toggle-button-004 {
    display: flex;
    align-items: center;
    position: relative;
    width: 100px;
    height: 50px;
    border-radius: 50px;
    box-sizing: content-box;
    background-color: #ff8d8d33;
    cursor: pointer;
    transition: background-color .4s;
}

.toggle-button-004:has(:checked) {
    background-color: #75bbff33;
}

.toggle-button-004::before {
    position: absolute;
    left: 5px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #ff8d8d;
    content: '';
    transition: left .4s;
}

.toggle-button-004:has(:checked)::before {
    left: 50px;
    background-color: #75bbff;
}

.toggle-button-004::after {
    position: absolute;
    left: 26px;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 600;
    font-size: .9em;
    content: 'No';
    transition: left .4s;
}

.toggle-button-004:has(:checked)::after {
    left: 71px;
    content: 'Yes';
}

.toggle-button-004 input {
    display: none;
}