Why does a rounded button have a defect on hover?

Question

css

Hello.
The problem is that if there is an element inside the button 100% of the width and height, which has a color different from the button, the inner element, overlapping the button completely, causes the button to generate a defect in the form of lines along the edges with the native color of the button. Than it can be caused? I bet what time ... Thank you.
https://codepen.io/anon/pen/LQwoyO

Answer 1

if without "overflow: hidden;" ?

Answer 2

Because because, try to make liquid by morphing.
It will be cooler and more interesting...