How to make this css styling?

pen: [ ]

I’m making new portfolio, and want when client is in mobile previewer
and when collapsable button is visible, this:

    there is wave that overlap my button for collapsing
    there are three span that styles inner content of that button, and they have same color as wave
    so i want when wave overlap button’s inner span, to paint span's background etc. black
    but when it pass, i want to be back to default color - wave-color
    * and it need to be smooth, not whole span to be painted to different color, just piece that wave overlap

Here how it looks overlaped:

And i want something like this:

I came up with idea, to put same type of wave ( dupicate this wave that already exist ) into this span to simulate smaller wave ( that is adjusted to this span-rectangle, with absolute position ) but with black fill, so next thing is to hack-up time of animation to every thing mix right

It looks good but why are you collapsing into a hamburger menu when the wave is still taking up enough room to show the full menu?