How to make a similar button with rounded edges on hover without overflow?

Question

css

Hello.
I was faced with the task of making a similar button. I did, applied overflow: hidden and it gave a defect - against a white background, artifacts of the button's native color are noticeable along the edges. Now I don’t understand how to make a similar button, but without overflow, provided that the edges should always be rounded, and the pseudo-element, even with width: 0%, should have the necessary rounding, like a button. In short, you need to make overflow: hidden without using such a property. I would be very grateful for your help! Thank you.
https://codepen.io/anon/pen/eMmZpo

Answer 1

https://codepen.io/aliencash/pen/dmPXEa