How to Add Image Background to Btn-Default Twitter-Bootstrap Button

Image in bootstrap button change with the background color and not the button color

Is that you wanted?

* {  font-family: arial;  background-color: #2a3752;  color: #dcd1d1;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
body {  background-color: #2a3752;}
.discord-logo-btn .fa-discord {  background: #fff;}
.discord-logo-btn:hover .fa-discord, .discord-logo-btn:focus .fa-discord  {  background: #e6e6e6;}

<!DOCTYPE html>

<html>
<head>  <meta http-equiv='content-type' content='text/html;charset=utf-8' />  <title>Login</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">  <link rel="icon" type="image/png" href="images/128.png" />  <title>Login - JAPC Web management panel</title>  <link rel="stylesheet" type="text/css" href="styles.css"></head>
<body>  <div class="container">    <div style="display: flex; justify-content: center;">      <img src="images/128.png" alt="Join and play coop logo" align="middle">    </div>    <h3 class="text-center">JAPC Web Management panel login</h3>    <form action="" method="post">      <div class="form-group">        <label for="username">Username:</label>        <input type="text" class="form-control" id="username" name="username" required>      </div>      <div class="form-group">        <label for="pwd">Password:</label>        <input type="password" class="form-control" id="pwd" name="password" required>      </div>      <button type="submit" name="submit" class="btn btn-default">Login</button>      <a href="scripts/discordLogin.php" class="discord-logo-btn btn btn-default">Discord Login <span class="fa fa-discord fa-5x" aria-hidden="true" ></span></a>    </form>  </div></body>
</html>

How to make a button with an image background?

CSS only with pseudo-elements. Hope that works for you.

.col{  width:50%;  display:block;}
.img-panel{  position:relative;  height: 200px;  background-image: url('https://placeimg.com/640/480/any');  background-size:cover;  color:white;}
.img-panel:after{  content:"";  width:100%;  height:100%;  top:0;  left:0;  position:absolute;  transition:0.2s;}
.img-panel:hover:after{  background:rgba(0,0,0,0.5) ;}
.img-panel:active:after{  background:rgba(0,0,0,0.8) ;}

<div class="col col-md-4">  <div class="img-panel translucent-overlay-light">        Hello  </div></div>

Bootstrap: button with image inside, remove visible button parts

I would do it as:

button {  width: 80px;  height: 90px;  padding: 0;  border: none;}
img {  width: 100%;  height: 100%;  overflow: hidden;}

<br/><br/><center>  <button>    <img src="https://www.abeautifulsite.net/uploads/2014/09/menu-icon.png?width=600&key=4bc015049071e7e16c61decfe5eca75cd081194e39a9e235b780ce644ef7e6ce"/>  </button></center>

How to change btn color in Bootstrap

The easiest way to see which properties you need to override is to take a look at Bootstrap's source code, specifically the .button-variant mixin defined in mixins/buttons.less. You still need to override quite a lot of properties to get rid of all of the .btn-primary styling (e.g. :focus, disabled, usage in dropdowns etc).

A better way might be to:

Create your own customized version of Bootstrap using Bootstrap's online customization tool
Manually create your own color class, e.g. .btn-whatever
Use a LESS compiler and use the .button-variant mixin to create your own color class, e.g. .btn-whatever

Styling Twitter's Bootstrap 3.x Buttons

Add extra colors to your less files and recompile. Also see Twitter Bootstrap Customization Best Practices.
update

As mentioned by @ow3n since v3.0.3 use:

.btn-custom {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}

Note in the above @btn-default-color sets the font color,@btn-default-bg the background color and @btn-default-border the color of the border. Colors for states like active, hover and disabled are calculated based on of these parameters.

For example:

.btn-custom {
  .button-variant(blue; red; green);
}

will result in:

Sample Image

For who want to use the CSS direct, replace the colors in this code:

.btn-custom {
  color: #0000ff;
  background-color: #ff0000;
  border-color: #008000;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
  color: #0000ff;
  background-color: #d60000;
  border-color: #004300;
}
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
  background-image: none;
}
.btn-custom.disabled,
.btn-custom[disabled],
fieldset[disabled] .btn-custom,
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled:active,
.btn-custom[disabled]:active,
fieldset[disabled] .btn-custom:active,
.btn-custom.disabled.active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom.active {
  background-color: #ff0000;
  border-color: #008000;
}
.btn-custom .badge {
  color: #ff0000;
  background-color: #0000ff;
}

end update

To generate a custom button:

.btn-custom {
    .btn-pseudo-states(@yourColor, @yourColorDarker);
 }

The above will generate the following css:

.btn-custom {
  background-color: #1dcc00;
  border-color: #1dcc00;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active {
  background-color: #19b300;
  border-color: #169900;
}
.btn-custom.disabled:hover,
.btn-custom.disabled:focus,
.btn-custom.disabled:active,
.btn-custom.disabled.active,
.btn-custom[disabled]:hover,
.btn-custom[disabled]:focus,
.btn-custom[disabled]:active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom:hover,
fieldset[disabled] .btn-custom:focus,
fieldset[disabled] .btn-custom:active,
fieldset[disabled] .btn-custom.active {
  background-color: #1dcc00;
  border-color: #1dcc00;
}

In the above #1dcc00 will be your custom color and #19b300 your darker color. In stead of the less solution you also can add this css direct to your html files (after the bootstrap css).

Or get your css code direct from Twitter's Bootstrap 3 Button Generator

bootstrap button on click showing default colour

The :active selector is what you need for the click.

.btn-sample:active {
  // click styles here
}

It looks like you have that above so if you are still seeing a slightly different color it is most likely because of the box-shadow that is also applied to the active button state. Disable that like so:

.btn-sample:active {
  box-shadow: none;
}

Edit:
The selector that is overriding your css is actually btn-success:active:focus. So you will need to add the following to your css:

.btn-success:active:focus {
  color: #ffffff; 
  background-color: #161617; 
  border-color: #494F57;
}

Further to my comment below, you would be better off creating your own class such as btn-custom to which you can apply your desired styles. Combining this with the existing btn class, you can achieve your desired result with much less code as you won't need to override existing selectors.

How to set Background image fit to the element

If what you want to achive is a rounded corner style, the best way to achieve that is by styling the button with css using the border-radius and the bootstrap btn class properties.

see this link for more info. Do not forget to add the !important value on css if you want to make changes over bootstrap clases.

Note that it's a better practice to make the use of styles and classes instead of images, since images will make your application less responsive and more rigid to handle. see this for more info.

.round{border-radius: 30px !important;}

<!-- Bootstrap importation -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary">Basic</button> This has default bootstrap round corners<br>
<br>if somehow you are using links try the link tag:<br>
<br><a href="#" class="btn btn-primary" role="button" aria-disabled="true">this is a link</a> here we made use of the "role" option and the bootstrap classes<br>
<h2> Changing round corners</h2><br>
<button type="button" class="btn btn-primary round">Basic</button> 30px round corner. notice how we also made the use of "!important" property on css in order to override bootstrap's default css properties<br>

Make Bootstrap Button Transparent

make css to .btn-primary-outline

example like this : https://jsfiddle.net/472cxwg9/

Place custom icon inside bootstrap button

First of all your <i> element doesn't have a height and width property.

But adding height and width alone wouldn't do what you want because <i> is an inline element so you want to add another property as well i-e. display: inline-block
Then the last thing to make it perfect would be to add background-size: cover (to adjust icon exactly into its container element)

.icon-play{
  background-image : url(../img/Clock-Play.png);
  background-size: cover;
  display: inline-block;
  height: 15px;
  width: 15px;
}