Sat Jul 09 2022

Flip Switch using Checkbox

CSS5042 views

File Name: checkbox-flip-switch.html

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Flip Switch</title>
        * {
            margin: 0;
            padding: 0;

        body {
            background-color: #383838;

        section {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;

        input[type=checkbox] {
            appearance: none;
            width: 100px;
            height: 50px;
            background-color: #ddd;
            border-radius: 4px;
            position: relative;
            cursor: pointer;
            outline: none;
            perspective: 250px;
            transition: 0.2s all ease-in-out;

        input[type=checkbox]:checked {
            background-color: #fc6f15;

        input[type=checkbox]::after {
            position: absolute;
            content: '';
            width: 50px;
            height: 50px;
            border-radius: 4px 0 0 4px;
            background-color: #fff;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
            transform-origin: center right;
            transition: 0.2s all ease-in-out;
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);

        input[type=checkbox]:checked::after {
            transform: rotateX(0deg) rotateY(180deg) rotateY(0deg);
        <input type="checkbox">

Result Screenshot(s)

Flip Switch using CheckboxWorking Sample0

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.