Need help with button styling

HTML-CSS
1

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

Codepen: https://codepen.io/hawkish/pen/QWdYOXv

1 Like
2

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

3

image

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

1 Like
4

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

2 Likes
5

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.

2 Likes
6

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
7

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

2 Likes
8

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