How to Remove Focus Around Buttons on Click

How to remove focus around buttons on click

I found this Q and A on another page, and overriding the button focus style worked for me. This problem may be specific to MacOS with Chrome.

.btn:focus {
  outline: none;
  box-shadow: none;
}

Note though that this has implications for accessibility and isn't advised until you have a good consistent focus state for your buttons and inputs. As per the comments below, there are users out there who cannot use mice.

Remove focus from button once clicked

just change the line :

$(".value").click(function() {

into

$(".value").mousedown(function() {

and it will work. hope this helps.

Remove blue border from css custom-styled button in Chrome

Doing this is not recommended as it regresses the accessibility of your site; for more info, see this post.

That said, if you insist, this CSS should work:

button:focus {outline:0;}

Check it out or JSFiddle: http://jsfiddle.net/u4pXu/

Or in this snippet:

button.launch {background-color: #F9A300;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.launch:hover {cursor: pointer;background-color: #FABD44;}
button.launch {background-color: #F9A300;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.launch:hover {cursor: pointer;background-color: #FABD44;}
button.change {background-color: #F88F00;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.change:hover {cursor: pointer;background-color: #F89900;}
button:active {outline: none;border: none;}
button:focus {outline:0;}

<button class="launch">Launch with these ads</button> <button class="change">Change</button>

How to remove focus on Button click?

You could add this to your styles. Make the focus color the same as the original.

.ant-btn-primary:focus {
  background-color: #1890ff !important;
}

Button retains focused after click

You want to be looking at the HTMLElement.blur() functionality. I'm not too familiar with Angular, but you need to have access to the event and its target in order to do so.

Something like this should work:

<button (click)="goBack($event)" mat-button
      aria-label="Previous Screen" role="navigation">
      <mat-icon>keyboard_arrow_left</mat-icon>
</button>

And for the JS:

goBack(event) {
    event.target.blur()
    this.location.back();
  }