How to add image background to btn-default twitter-bootstrap button?

Question

I try to design a bootstrap v3.3.5 button by using the existing class btn-default, below are the sample of codes of what I had done.

<!-- Latest compiled and minified CSS -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">    <!-- Optional theme -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">    <!-- Latest compiled and minified JavaScript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>      <style type="text/css">    .sign-in-facebook    {      background-image: url('http://i.stack.imgur.com/e2S63.png');      background-position: -9px -7px;      background-repeat: no-repeat;      background-size: 39px 43px;      padding-left: 41px;      color: #000;    }    .sign-in-facebook:hover    {      background-image: url('http://i.stack.imgur.com/e2S63.png');      background-position: -9px -7px;      background-repeat: no-repeat;      background-size: 39px 43px;      padding-left: 41px;      color: #000;    }  </style>  <p>My current button got white background<br/>  <input type="button" value="Sign In with Facebook" class="btn btn-default sign-in-facebook" style="margin-top:2px; margin-bottom:2px;" >  </p>  <p>I need the current btn-default style like below<br/>  <input type="button" class="btn btn-default" value="Sign In with Facebook" />  </p>  <strong>NOTE:</strong> facebook icon at left side of the button.

Sample facebook icon:

How I can modify the class of .sign-in-facebook to create my own style button ?

Answer 1

Instead of using input type button you can use button and insert the image inside the button content.

<button class="btn btn-default">      <img src="http://i.stack.imgur.com/e2S63.png" width="20" /> Sign In with Facebook </button> 

The problem with doing this only with CSS is that you cannot set linear-gradient to the background you must use solid color.

.sign-in-facebook {     background: url('http://i.stack.imgur.com/e2S63.png') #f2f2f2;     background-position: -9px -7px;     background-repeat: no-repeat;     background-size: 39px 43px;     padding-left: 41px;     color: #000;   }   .sign-in-facebook:hover {     background: url('http://i.stack.imgur.com/e2S63.png') #e0e0e0;     background-position: -9px -7px;     background-repeat: no-repeat;     background-size: 39px 43px;     padding-left: 41px;     color: #000;   } 

body {    padding: 30px;  }

<!-- Latest compiled and minified CSS -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">    <!-- Optional theme -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">    <!-- Latest compiled and minified JavaScript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    <style type="text/css">    .sign-in-facebook {      background: url('http://i.stack.imgur.com/e2S63.png') #f2f2f2;      background-position: -9px -7px;      background-repeat: no-repeat;      background-size: 39px 43px;      padding-left: 41px;      color: #000;    }    .sign-in-facebook:hover {      background: url('http://i.stack.imgur.com/e2S63.png') #e0e0e0;      background-position: -9px -7px;      background-repeat: no-repeat;      background-size: 39px 43px;      padding-left: 41px;      color: #000;    }  </style>      <h4>Only with CSS</h4>    <input type="button" value="Sign In with Facebook" class="btn btn-default sign-in-facebook" style="margin-top:2px; margin-bottom:2px;">    <h4>Only with HTML</h4>    <button class="btn btn-default">    <img src="http://i.stack.imgur.com/e2S63.png" width="20" /> Sign In with Facebook  </button>