Toggle buttons show square-cut borders due to their hidden overflow on transition

A minor, more of a cosmetic, issue/feature request. Currently the toggle button pattern is achieved by a broad button "cut off/hidden" by an overflow:hidden (see overflow_hidden_deactivated.png). On click that leads to a visual glitch on transition leading to square-cut edges for the fraction of a second which always looks off and distracting (see overflow_hidden_deactivated_transition.png - the side the toggle is moving to is showing those square cut edges). Is the case for the recent versions of Safari, Chrome and Firefox I've tested on MacOS.

An alternative CSS only pattern might be the one shown here https://codepen.io/mburnette/pen/LxNxNg