javascriptjqueryhtmlcss

How can I remove Bootstrap button border?

I have a custom bootstrap button and I cannot remove its border after click. I was able to change its background color but there is an insistent blue border boring me.

I click on it, it opens a modal window and after closing the modal the border is still there until I click on another part of the page even if I change values in :active and :focus.

enter image description here

#openPopup {
  padding: 20px 30px;
  background-color: #a2238e;
  border-color: #a2238e;
  box-shadow: 1px 1px 1px #999;
  white-space: normal;
  font-size: smaller;
  letter-spacing: 0.2px;
}

#openPopup:hover,
#openPopup:active,
#openPopup:focus {
  background-color: #912284 !important;
  border-color: #912284 !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<button id="openPopup" type="button" class="btn btn-primary btn-lg text-uppercase" data-toggle="modal" data-target="#myModal">
    some text here
</button>

Solution

  • Try this

    #openPopup:focus {
    outline: none;
}

    or

    #openPopup:focus {
    outline: 0;
}