Removing the unwanted border around a button after it has been clicked?


In the above image, I have a button which normally displayed no border, however after it has been clicked, this border comes up around it.

Is there a simple way to remove this?


Hello @jaredmonkman :grinning:

Can you please post your code so I can see what you are working with?

Sure, below is the html/BS and CSS.


<button type="button" id="viewMyWork" class="btn btn-outline-info btn-lg">View My Work<br><iclass="fas fa-chevron-circle-down"></i></button>


#viewMyWork {

    margin-top: 100px;

    color: white;

    font-family: 'Lato', sans-serif;

    border: none;



#viewMyWork:hover {

    color: white;

    background-color: transparent;    



button {
  outline: none;

Hi, I tried this but the border/outline still persists and nothing changes. Just to be clear, this only appears after the button has been clicked.

See below for the button before I click it, then after it is clicked.

Just to clarify, the button on the right is before, then the button on the left is after I click it.


2 Capture

Alright, try

button:focus {
  outline: none;

Hopefully this will work