CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
.home
~
.explore

Switch

The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.
<label style="
    display: flex;

    /* Rounded border */
    border-radius: 9999px;

    /* Size */
    height: 32px;
    width: 64px;

    /* OFF status */
    background-color: rgba(0, 0, 0, .1);
    border: 1px solid rgba(0, 0, 0, .3);

    /* ON status */
    background-color: #357edd;
    border: 1px solid #357edd;
    /* Push the circle to the right */
    justify-content: flex-end;
">
    <!-- Hide the input -->
    <input type="checkbox" style="display: none" />

    <!-- Circle -->
    <div style="
        /* Rounded border */
        border-radius: 9999px;

        /* Size */
        width: 32px;

        background-color: #FFF;

        /* OFF status */
        border: 1px solid rgba(0, 0, 0, .3);
    " />
</label>

Related patterns

Radio switch

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!