HTML・CSSで作るトグルボタンのデザイン4選

ON・OFFという2つの状態を切り替えられるトグルボタンの、JavaScript不要かつHTML・CSSのみで作れるデザインをまとめました。iOSでよく見るものから文字ありのものまで、どれもコピペで取り入れることが可能です。

シンプルなトグルボタン

シンプルなトグルボタンのiOS風バージョン

iOS風

step1
デザインを調整する
  • アニメーション

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

step2
HTMLをコピペする
HTML
<label class="toggle-button-001">
    <input type="checkbox"/>
</label>
step3
CSSをコピペする
CSS
.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風(背景細め)バージョン

iOS風(背景細め)

step1
デザインを調整する
  • アニメーション
step2
HTMLをコピペする
HTML
<label class="toggle-button-003">
    <input type="checkbox"/>
</label>
step3
CSSをコピペする
CSS
.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風(縁あり)バージョン

iOS風(縁あり)

step1
デザインを調整する
  • アニメーション
step2
HTMLをコピペする
HTML
<label class="toggle-button-002">
    <input type="checkbox"/>
</label>
step3
CSSをコピペする
CSS
.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バージョン

Yes・No

step1
デザインを調整する
  • アニメーション

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

step2
HTMLをコピペする
HTML
<label class="toggle-button-004">
    <input type="checkbox"/>
</label>
step3
CSSをコピペする
CSS
.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;
}