Toggle buttons with checkmarks

[danirabbit]

Something I've heard quite frequently is that the checked state of toggle buttons isn't clear enough. So what if we added a literal checkmark?

button.text-button {
    background: white;
    font-weight: 500;
    border-radius: 3px;
    padding: 6px 12px;
    box-shadow:
        0 0 0 1px alpha(black, 0.1),
        0 1px 3px -1px alpha(black, 0.3),
        0 2px 6px alpha(black, 0.05);
    transition: transform 300ms cubic-bezier(0.66, 3, 0.64, 1);
}

button.text-button:active {
    background: @SILVER_300;
    transform: scale(0.95);
    transition:
        transform 300ms cubic-bezier(0.4, 0, 0.2, 1);	
}

button.text-button.toggle {
    padding: 0.5em 2em;
}

button.text-button.toggle:checked {
        background-color: white;
        background-image: -gtk-icontheme("process-completed-symbolic");
        background-repeat: no-repeat;
        background-size: 1em;
        background-position: calc(100% - 0.5em) calc(50% + 0.5px);
        -gtk-icon-palette: success @BLUEBERRY_500;
}

button.text-button.toggle:checked:active {
    background: @SILVER_300;
}

[micahilbery]

I did something kinda similar to this in Thunderbird. I had a little state indicator inside the button that "lights up" when pressed, as well as the button looking pressed in.