.btn {
    border: 1px solid #0472bb;
    display: inline-block;
    padding: 10px;
    position: relative;
    text-align: center;
    transition: background 600ms ease, color 600ms ease;
}

input[type="radio"].toggle {
    display: none;
}

    input[type="radio"].toggle + label {
        cursor: pointer;
        min-width: 142px;
    }

        input[type="radio"].toggle + label:hover {
            background: none;
            color: #1a1a1a;
        }

        input[type="radio"].toggle + label:after {
            background: #1a1a1a;
            content: "";
            height: 100%;
            position: absolute;
            top: 0;
            transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
            width: 100%;
            z-index: -1;
        }

    input[type="radio"].toggle.toggle-left + label {
        border-right: 0;
    }

        input[type="radio"].toggle.toggle-left + label:after {
            left: 100%;
        }

    input[type="radio"].toggle.toggle-right + label {
        margin-left: -5px;
    }

        input[type="radio"].toggle.toggle-right + label:after {
            left: -100%;
        }

    input[type="radio"].toggle:checked + label {
        cursor: default;
        color: #fff;
        background: #0472bb;
        transition: color 200ms;
    }

        input[type="radio"].toggle:checked + label:after {
            left: 0;
        }