A Custom Unlit Shader(Transparent) applied on 2 object with a sprite renderer on it is having Black sides only on the top?

SO i am really new to shader programming , and just knows the bare basics . My main goal is to give some effects to a 2D object (With a sprite renderer on it) The way i did is so far, is by creating an unlit shader , (made it transparent ) and inside the fragment shader i put this code, to give it a wavery effect:

fixed4 frag (v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, float2(i.texcoord.x,i.texcoord.y+sin(i.vertex.x/20+_Time[1]/2)/50)); UNITY_APPLY_FOG(i.fogCoord, col); //col.r = sin(_Time[1]/20); return col; } But the issue what am facing currently is the there is a black portion coming from the top when the wavery effect is happening (i suppose its either because the default sprite texture used by the material is set to clamp ,but am not sure or knows how to fix it)>? This however not happening from the bottom but happening from the left offset but not the right. I'll upload a snap of how the UI button looks after Using my custom shader is applied ![alt text][1]

Also , what shaders are generally used on 2D objects(with sprite renderers) or UI elements to give them special effects . Thanks a lot [1]: /storage/temp/91566-shadererror.png