我尝试使用现有的类设计一个 bootstrap v3.3.5 按钮btn-默认值，下面是我所做的代码示例。
<!-- 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('https://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('https://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.
Facebook 图标示例：
我如何修改类.sign-in-facebook创建我自己的风格按钮？
而不是使用input type button您可以使用button并将图像插入按钮内容中。
<button class="btn btn-default">
<img src="https://i.stack.imgur.com/e2S63.png" width="20" /> Sign In with Facebook
</button>
仅使用 CSS 执行此操作的问题是您无法设置linear-gradient背景必须使用纯色。
.sign-in-facebook {
background: url('https://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('https://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('https://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('https://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="https://i.stack.imgur.com/e2S63.png" width="20" /> Sign In with Facebook
</button>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
