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.

Answer 1

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

      Sign In with Facebook

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;
}

Only with CSS



Only with HTML


   Sign In with Facebook