Menu
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 ?
551
Just add . bg-img class on your <img> element and .has-bg-img class to parent element that you want to apply a background image. Images are part of the DOM and are transformed into CSS background-image after they are fully loaded.
By default, . btn-primary has white text on a blue background. Adjust the default colors using the --button-color and --button-background-color custom properties.
Bootstrap Button ColorsUsing one of the default modifier classes will change the color of the text and background color of your buttons. .Btn-danger will make the button red and font white, while . btn-warning will make the button yellow and font black, and so on.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
