How to Remove Blue "Selected" Outline on Buttons

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 do I remove blue selected outline on buttons?

That is a default behaviour of each browser; your browser seems to be Safari, in Google Chrome it is orange in color!

Use this to remove this effect:

button {
  outline: none; // this one
}

How to remove the blue highlight of button on mobile?

You can add:

-webkit-tap-highlight-color: transparent;

You can also add this to your stylesheets to define it globally:

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Hope this helps :)

You can find the documentation here for more info: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5

How to remove blue-box-fill when clicking the buttons?

The property you're looking for is tap-highlight-color

-webkit-tap-highlight-color: transparent;

HTML button becomes selected with little blue outline after it is clicked which is not needed to be

Add outline: none; or outline: 0;(outline 0 vs none difference) to the button's css to remove the outline.

But as MDN notes,

Accessibility concerns

Assigning outline a value of 0 or none will remove the browser's
default focus style. If an element can be interacted with, it must
have a visible focus indicator. Provide obvious focus styling if the
default focus style is removed.

Removing Blue Border around a Button After Click

I thought it was outline but not, of course i didn't saw your code, but after i see, the problem is here:

border: 2px var(--color-foreground-text-sub) solid;

remove this line. that's all.

Edit: and after click, override this:

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none!important;
}

:root {  --color-foreground-text-main: rgb(255, 72, 142);  --color-foreground-text-sub: rgb(0, 114, 153);}
.btn.focus, .btn:focus {    outline: 0;    box-shadow: none!important;}
html,body {  height: 100%;}
img {  max-width: 100%;}
#cover {  background: #222 url('Resources/img/cover.jpg') center center no-repeat;  background-size: cover;  color: var(--color-foreground-text-main);  height: 100%;  text-align: center;  display: flex;  align-items: center;}
#cover-caption {  width: 100%;}
#subscribe-button {  text-align: center;  background: var(--color-foreground-text-main);  color: white;  outline: 0;}
#subscribe-button:hover {  background: var(--color-foreground-text-sub);}

<!DOCTYPE html><html lang="en">
<head>  <!--Mandatory meta tags-->  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <!--Bootstrap CSS-->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">  <!--Custom Styles-->  <link rel="stylesheet" href="SP_BaseStyle.css" />  <title>School Project</title></head>
<body>  <section id="cover">    <div id="cover-caption">      <div class="container">        <div class="col-12">          <br>          <div class="row">            <div class="p-0 pr-1 pb-1 m-0                         col-12 col-sm-6 col-md-5">              <label class="sr-only">Name</label>              <input type="text" class="form-control form-control-lg" placeholder="George Smith">            </div>            <div class="p-0 m-0 pr-1 pb-1                         col-12 col-sm-6 col-md-5">              <label class="sr-only">Email</label>              <input type="text" class="form-control form-control-lg" placeholder="george.smith@email.com">            </div>            <button type="submit" class="btn btn-lg mb-1                        col-12 col-md-2" id="subscribe-button">Subscribe!</button>          </div>          <a href="#nav-main" class="btn btn-secondary btn-lg" role="button">↓</a>        </div>      </div>    </div>  </section>
  <!-- jQuery library -->  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <!-- Popper -->  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <!-- Latest compiled and minified Bootstrap JavaScript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  <!-- Initialize Bootstrap functionality -->  <script>    // Initialize tooltip component    $(function() {      $('[data-toggle="tooltip"]').tooltip()    })
    // Initialize popover component    $(function() {      $('[data-toggle="popover"]').popover()    })  </script></body>
</html>

Disable blue stroke effect on button clicked

remove the focus css:

button:focus {outline:0;}

For touchscreens:

@media (hover: hover) {
    button:hover {
        outline:0;
    }
}