How can i avoid the square box around the button when i click

HTML-CSS
1 
<!DOCTYPE html>
<html>
<body>


  <button style="border-radius:50px;    height:50px;"onclick="myFunction()">Click me here</button>

  <p id="demo"></p>

  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "Hello World";
    }
  </script>

</body>
</html>
1 Like
3

you can add border-style:solid to this block of code

4

You could try using the outline property for your button and set it to none.

In your case it would be:

<button style="border-radius:50px;    height:50px; outline:none;"onclick="myFunction()">Click me here</button>

Hope this helps you.

1 Like
5

I round it un another post looks similar as yours but i put it in input[type=‘text’]:focus

6

@cyborg001,

try this

button:hover,
button:focus{
  outline-style:none;
}

only focus is ok to solve your issue, but you should also add hover for some other cases

9

The answer is outline: none (or 0) as you’ve done, but note that just doing this is super bad from an accessibility point of view as you’re removing the main visual clue that an control is focussed. If you’re removing it, that’s fine but you really need to replace it with something that indicates the control is focussed (ie if a user tabs to the button, how do they tell it’s selected now that you’ve removed the outline?)

1 Like
10

i just use hover for another function :slight_smile, i used:
input[type=‘text’]:focus{
outline:0;
}

11

Nice never thought of it that way. So in the css document just use the psuedo class of focus to just comply with web accessibility laws?

12

Yes, definitely: it’s a little thing but it’s annoying even for people without any special accessibility needs who know to tab through form controls, it’s really common to find that there’s no real visual clue which control you’re on (input, button etc) because the developer has purposefully removed the hint

13

Oof okay thanks for the tips!!