The switch button is a commonly used UI element that allows users to toggle between two states, typically representing an "on" or "off" state. In this example, we create a switch button using CSS by utilizing the checkbox input element and styling it to achieve the desired switch effect.

By toggling the checkbox, users can interact with the switch button and observe the visual changes in its appearance, indicating the current state of the switch.

How to create switch button

Create HTML structure for switch button as follows:

<div class="componentsBox">

        <div class="title">
            <h2>Switch button</h2>
        </div>

        <div class="content">
            <label class="switch m5">
                <input type="checkbox">
                <small></small>
            </label>

            <label class="switch m5">
                <input type="checkbox">
                <small></small>
            </label>

            <label class="switch m5">
                <input type="checkbox" checked="">
                <small></small>
            </label>
        </div>


        <div class="content">
            <label class="switchSmall m5">
                <input type="checkbox">
                <small></small>
            </label>

            <label class="switchSmall m5">
                <input type="checkbox">
                <small></small>
            </label>

            <label class="switchSmall m5">
                <input type="checkbox" checked="">
                <small></small>
            </label>
        </div>


        <div class="content">
            <label class="switchSmall2 m5">
                <input type="checkbox">
                <small></small>
            </label>

            <label class="switchSmall2 m5">
                <input type="checkbox">
                <small></small>
            </label>

            <label class="switchSmall2 m5">
                <input type="checkbox" checked="">
                <small></small>
            </label>
        </div>
    </div>

The complete CSS styles for switch button:

body {
            margin: 0;
		    padding: 0;
		    background: #67b57b;
		    font-family: sans-serif;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    height: 100vh;
        }

        * {
            box-sizing: border-box;
        }

        .componentsBox {
            padding: 50px;
            text-align: center;
        }

        .title h2 {
            font-size: 30px;
            color: #ffffff;
            font-weight: 700;
            line-height: 1.2em;
            margin: 0 0 35px;
        }

        .componentsBox .content {
            margin-bottom: 20px;
        }

        .m5 {
            margin: 0 5px;
        }

        .switch {
            display: inline-block;
        }

        .switch input {
            display: none;
        }

        .switch small {
            display: inline-block;
            width: 52px;
    		height: 22px;
            background: #455a64;
            border-radius: 30px;
            position: relative;
            cursor: pointer;
        }

        .switch small:after {
            content: "No";
            position: absolute;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            width: 100%;
            left: 0px;
            text-align: right;
            padding: 0 6px;
            box-sizing: border-box;
            line-height: 22px;
        }

        .switch small:before {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            background: #fff;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: .3s;
            box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
        }

        .switch input:checked~small {
            background: #4fc5c5;
            transition: .3s;
        }

        .switch input:checked~small:before {
            transform: translate(29px, 0px);
            transition: .3s;
        }

        .switch input:checked~small:after {
            content: "Yes";
            text-align: left;
        }

        .switchSmall {
            display: inline-block;
        }

        .switchSmall input {
            display: none;
        }

        .switchSmall small {
            display: inline-block;
            width: 40px;
            height: 18px;
            background: #455a64;
            border-radius: 30px;
            position: relative;
            cursor: pointer;
        }

        .switchSmall small:before {
            content: "";
            position: absolute;
            width: 12px;
            height: 12px;
            background: #fff;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: .3s;
            box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
        }

        .switchSmall input:checked~small {
            background: #4fc5c5;
            transition: .3s;
        }

        .switchSmall input:checked~small:before {
            transform: translate(21px, 0px);
            transition: .3s;
        }

        .switchSmall2 {
            display: inline-block;
        }

        .switchSmall2 input {
            display: none;
        }

        .switchSmall2 small {
            display: inline-block;
            width: 45px;
            height: 15px;
            background: #455a64;
            border-radius: 30px;
            position: relative;
            cursor: pointer;
        }

        .switchSmall2 small:before {
            content: "";
            position: absolute;
            width: 19px;
            height: 19px;
            background: #fff;
            border-radius: 50%;
            top: -2px;
            left: -1px;
            transition: .3s;
            box-shadow: -3px 0 3px rgba(0, 0, 0, 0.25);
        }

        .switchSmall2 input:checked~small {
            background: #4fc5c5;
            transition: .3s;
        }

        .switchSmall2 input:checked~small:before {
            transform: translate(27px, 0px);
            transition: .3s;
            box-shadow: 3px 0 3px rgba(0, 0, 0, 0.25);
        }