Bootstrap Button Shows Blue Outline When Clicked

Bootstrap button outline and after clicking outline

Why are you declaring styling for buttons twice here?

.btn: focus, .btn. Focus {
  outline: 0;

}
button: focus{
    outline:0;
}

Also, styling using html components is a bad practice in web design. You should use class in most cases. For changing a particular element you should use id.

Answering to your question, it is a possible duplicate of Bootstrap button - remove outline on Chrome OS X that property around button when clicked is not outline, it is a box-shadow property. Remove your button styling definitions and replace them using this code:

.btn:focus{
  box-shadow: none!important;

}

Then the shadow after click will disappear.

On another note, it seems that you are already using bootstrap 5 and inheriting styles from it. However, you are redefining the primary button styles manually. Why? Your imported CSS file should automatically update the primary button style. Also, do not put a space between focus and :.

As for your responsiveness issue, make your form responsive using bootstrap library since you're already using it.
https://getbootstrap.com/docs/4.0/components/forms/

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>

Bootstrap button showing blue border?

With out seeing your code, I would suggest just applying this css to your btn class

.btn {
  border:none;
}

.btn should be used by every button styled with bootstrap

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.

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>

Bootstrap Button Primary stays blue for a second when clicked or active, even when overwritten

Use !important to prevent override (fiddle:https://jsfiddle.net/7tydLgj3/2/)

.btn-primary {    padding: 16px;    padding-right: 40px;    padding-left: 40px;    color: #fff!important;    background-color: #A8CC6B!important;    border-color: #A8CC6B!important;    margin-left: 50px;}.btn-primary:focus,.btn-primary.focus {        color: #fff!important;        background-color: #A8CC6B!important;        border-color: #A8CC6B!important;    }.btn-primary:hover {        color: #fff!important;        background-color: #657D41!important;        border-color: #657D41!important;    }.btn-primary:active,.btn-primary.active,.open > .dropdown-toggle.btn-primary {        color: #fff!important;        background-color: #A8CC6B!important;        border-color: #A8CC6B!important;    }.btn-primary:active:hover,.btn-primary.active:hover,.open > .dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open > .dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open > .dropdown-toggle.btn-primary.focus {        color: #fff!important;        background-color: #A8CC6B!important;        border-color: #A8CC6B!important;    }.btn-primary:active,.btn-primary.active,.open > .dropdown-toggle.btn-primary {    background-image: none;    background-color: #A8CC6B!important;        border-color: #A8CC6B!important;}    .btn-primary.disabled:hover,    .btn-primary[disabled]:hover,    fieldset[disabled] .btn-primary:hover,    .btn-primary.disabled:focus,    .btn-primary[disabled]:focus,    fieldset[disabled] .btn-primary:focus,    .btn-primary.disabled.focus,    .btn-primary[disabled].focus,    fieldset[disabled] .btn-primary.focus {        background-color: #A8CC6B!important;        border-color: #A8CC6B!important;    }

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>  <button type="button" class="btn btn-primary">Primary</button>

React button has blue border around it when clicking

You need to set focus outline for button:

button:focus {outline:none;}

If it doesn't work use !important also.

--> button:focus {box-shadow:none !important;} this solved it