css why do i have border after clicking the button?

Question

When I click the button, a border is shown. How can I remove this border and why is it there?

This is the CSS code:

.operator button {
margin: 3px;
/*height: 25px;
width: 25px;*/  
border-radius: 50%;
background-color: green;
border: none; 
font-size: 10px;
padding: 12px 12px;
border: 2px solid #4CAF50;
transition-duration: 1s;
text-align: center;
display: inline;
 }

[here is an image 1

Answer 1

Add outline: 0; on your button:focus :

.operator button {
    margin: 3px;
    /*height: 25px;
    width: 25px;*/  
    border-radius: 50%;
    background-color: green;
    border: none; 
    font-size: 10px;
    padding: 12px 12px;
    border: 2px solid #4CAF50;
    transition-duration: 1s;
    text-align: center;
    display: inline;
}

.operator button:focus { outline: 0; }

<div class="operator">
  <button>Test</button>
</div>

You might want to read this too : https://stackoverflow.com/a/25298082/9718056