带图标的CSS3按钮
问题描述：
我按照此tutorial创建带有图标的CSS 3按钮。但是本教程图标高度的问题取决于font-size。如果我增加文字的字体大小，图标非常适合，但如果我尽量减少字体大小，它不适合well.Image我使用的是40x30带图标的CSS3按钮
a.button {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 5px 5px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 15px;
margin-bottom: 15px;
display: block;
color: #597390;
line-height: 38px;
font-size: 15px;
font-weight: bold;
}
a.button:hover {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #eeeeee));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: #000;
display: block;
}
a.button:active {
background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #dbdbdb),color-stop(1, #ffffff));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff')";
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
}
a.button {
border: 1px solid #979797;
}
a.button.icon {
padding-left: 11px;
}
a.button.icon span{
padding-left: 48px;
display: block;
background: url(../img/gmail2.png) no-repeat;
}
答
如果可以的话这将是有益分享你的代码。
在您提供的链接的css3 buttons examples中，如果我减小字体大小并设置以下CSS样式，则可以使用。
span { display: block; }
span是在按钮内部包装文本的标签。
答
你的陈述有点模棱两可，没有问题，但我会采取刺。
在这种情况下，font-size将始终发挥一个小的因素，因为它将确定图标的高度。在某些时候，你将需要知道关于按钮大小的一些细节，但它不一定受字体的影响。如果您设置了按钮height和img{ height:100%; }，图像将缩放以适合该区域。
<div id="container">
<h1><img src="http://placedog.com/50/50" alt="" />Button</h1>
</div>
与
#container{
border: 2px solid black;
width: 200px;
height: 20px;
}
#container img{
height:100%;
}
组合应该让你关闭你的东西，你在找什么。我掀起了一个小小的jsfiddle来演示一种方法来实现这一点。
如果我添加到a.button.icon span {display：block; }，图像不是中心。尝试添加更大尺寸的图像。 –
如果我在共享的链接的示例上执行此操作，它工作正常。所以发布你的代码到目前为止，以进一步帮助你。 –