Circular button showing rectangular background upon click

[samvb]

Hi,

I have this button with border-radius:50% so it is circular and goes well with the design. Problem is on desktop browsers it shows a rectangular thin line border while in touch screen, it shows a full rectangular background behind the circular element upon tap/touch.

{border:0;background-color:#F0F0F0;border-radius:50%;width:200px;height:200px}

The rectangular shape in touch screens appear in areas not covered by the circle. While in desktops, the thin lines exists all the way.

Any tip to remove them and button remains the same in behavior on click/tap?

[Paulie_D]

We can’t debug code we haven’t seen.

A Demo in codepen would be useful.

[samvb]

#btn {border:0;background-color:#F0F0F0;border-radius:50%;width:200px;height:200px}

html:

<input type=”button” id=”btn” value=”Click me”>

During click, a border appears. During tap, a background color of someking is shown. the circular button have a background of F0F0F0 against a white a body background.

Hope that’s enough.

[Author]

Posts