.switch {
    border: 3px solid #b8bace;
    border-radius: 10px;
    color: #b8bace;
    font-size: 14px;
    height: 20px;
    margin: 5px 0px;
    position: relative;
    width: 280px;
}

.quality {
    position: relative;
    float: left;
    width: 50%;
    height: 100%;
    line-height: 40px;
}
.quality:first-child label {
    border-radius: 5px 0 0 5px;
}
.quality:last-child label {
    border-radius: 0 5px 5px 0;
}
.quality label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-style: italic;
    text-align: center;
    transition: transform 0.4s, color 0.4s, background-color 0.4s;
}
.quality input[type="radio"] {
    appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
}
.quality input[type="radio"]:focus {
    outline: 0;
    outline-offset: 0;
}

.quality input[type="radio"]:checked ~ label {
    background-color: #d7d7d7;
    color: #111;
}
.quality input[type="radio"]:active ~ label {
    transform: scale(1.05);
}