CSS3 Buttons with Icon
I am following this tutorial to create a CSS 3 button with an icon. But the problem is in this guide The height of the icon depends on font-size
. If I increase the font size of the font the icon fits well, but if I try to decrease the font size it doesn't fit well. I am using 40x30
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;
}
source to share
Your statement is a bit ambiguous and has no question whatsoever, but I'll take a hit.
In this case, a font-size
small factor will always play, as it will determine the height of the icon. At some point, you will need to know some details about the size of the button, but it should not be influenced by the font. If you set the button height
and img{ height:100%; }
, the image will be scaled to fit the area.
<div id="container">
<h1><img src="http://placedog.com/50/50" alt="" />Button</h1>
</div>
in conjunction with
#container{
border: 2px solid black;
width: 200px;
height: 20px;
}
#container img{
height:100%;
}
Should you get something that's close to what you are looking for. I have weighed in on a little jsfiddle to demonstrate one way to achieve this.
source to share
It would be helpful if you could share your code.
In the css3 examples of the link buttons you provided, if I decrease the font size and set the following CSS style it works.
span { display: block; }
span
is a tag that wraps text inside buttons.
source to share