Need help with button styling

There’s this weird border that pops up when I click the button, how do I get rid of it? Any help is appreciated


1 Like

what border? I don’t see a border in the button


The border will show if you click the button, I didn’t notice it until I accidentally pressed it myself.

1 Like

I’m clicking the button, I don’t see it. It may be a browser implementation thing, what’s your browser? I’m using Google Chrome
note that you need to have a visual indicator that the button is being clicked, for accessibility


Hi there, you have problem with the default outline. It always there as a means of accessibility when using keyboard on desktops. If you are using touch device, you won’t see it. Now, how to remove it and fix the behavior the way you’ll like.

  1. Set outline on the button to none(outline:none;). That will remove it on all states. But it is a bad user experience. So, add some visual cues using the :focus pseudo-class.

  2. Instead of applying the outline none to the button, you style the :focus pseudo-class. Here you set the outline to none, and add other styling you may need on the element for accessibility.

That’s all…

All the best.


I’m using Opera, it might be that issue. I don’t use google because I accidentally download a nasty extension that is a virus now whenever I use google, it redownloads the virus

1 Like

Thank you Marknjo7 and Ieahleen. The solution would be to remove outline, but as pointed out it would be bad UX, so i’ll add a pseudo element of animation. Thanks


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.