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

Radio switch

<!-- Container -->
<div style="
    background-color: rgba(0, 0, 0, .1);
    border-radius: 9999px;
    display: inline-flex;
    padding: 4px;
">
    <!-- Radio container -->
    <label style="
        border-radius: 9999px;
        cursor: pointer;
        padding: 4px 8px;

        /* For selected radio only */
        background-color: #357edd;
        color: #fff;
    ">
        <input type="radio" style="display: none" />

        <!-- Text -->
        ...
    </label>

    <!-- Other radio item -->
    ...
</div>

Use cases

Related patterns

Switch

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