CODEWITHSUNDEEP
javascripthtmlcssborder-layout
user168983
user168983

Reputation: 844

Removing box after a div with border-radius is selected

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:

button while selected

Any help on this will be greatly appreciated.

Upvotes: 0

Views: 424

Answers (3)

samar
samar

Reputation: 180

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

Upvotes: 1

Californium
Californium

Reputation: 601

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.

Upvotes: 1

ab29007
ab29007

Reputation: 7766

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;
}

Upvotes: 1

Related Questions