How to remove the square border from around a button which has already been visited?

Question

After I click one of the buttons and go back to the main page, the button that I clicked is bordered with a square blue border. How can I remove this border so that there's no square border around the circle button after I have clicked it?

button {
  width: 100px;
  height: 100px;
  background: #3F6;
  border-color: #000;
  border-radius: 4em;
}
button:hover {
  background: #F00;
}

<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>

Answer 1

You need to add outline: none;.