Removing box after a div with border-radius is selected

Question

I have a div with a span element in it, which will have a redirection function for it. The div has a border-radius property. All the working and UI is all looking fine. But when the element is selected am seeing a border box around the div.

Since it appears only for a minute time before redirection, I was unable to track what could be the CSS issue with it.

Here is my code:

HTML: Button Text

CSS:

.menu-button{
    background-color: green;
    border-radius: 30px;
    cursor: pointer;
    margin: 10px 5px 2%;
    text-transform: uppercase;
}

this is how the div on select looking like, before it moves to different page:

Any help on this will be greatly appreciated.

Answer 1

Make sure you set the outline of the menu-button class to none. Namely, outline: none;.

This is happening due to some default values of the button element. On Google Chrome, for example, the outline is a standard blue border to highlight where you are currently at.

Hence, by setting outline: none; will remove any border when you click on a button element.

---

This applies to input elements as well, for future reference.

Answer 2

Set outline attribute for the menu-button. like this

.menu-button{
    background-color: green;
    border-radius: 30px;
    cursor: pointer;
    margin: 10px 5px 2%;
    text-transform: uppercase;
    outline:none;
}

Answer 3

.menu-button{
    background-color: green;
    border-radius: 30px;
    cursor: pointer;
    margin: 10px 5px 2%;
    text-transform: uppercase;
    border:none;
}