CODEWITHSUNDEEP
css
Himanshu Yadav
Himanshu Yadav

Reputation: 13587

CSS3 Buttons with icon

I am following this tutorial to create CSS 3 button with Icon. But the problem in this tutorial Icon height depends on font-size. If I increase font-size of text, icon fits well but if I try to reduce the font-size, it doesn't fit well.Image I am using is 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;
}

Upvotes: 3

Views: 1599

Answers (2)

lacy
lacy

Reputation: 491

Your statement is a little ambiguous and lacks a question, but I'll take a stab.

In this scenario, font-size will always play a small factor, as it will determine the height of the icon. At some point you are going to need to know some details about the button size, but it doesn't have to be affected by font. If you set the button height and the img{ height:100%; } the image will scale to fit the area.

<div id="container">
    <h1><img src="http://placedog.com/50/50" alt="" />Button</h1>
</div>

combined with

#container{
    border: 2px solid black;
    width: 200px;
    height: 20px;
}
#container img{
    height:100%;
}

Should get you something you close to what you're looking for. I've whipped up a small jsfiddle to demonstrate one way to accomplish this.

Upvotes: 2

m.spyratos
m.spyratos

Reputation: 4219

It would be helpful if you could share your code.
In the css3 buttons examples of the link you provided, if I decrease font-size and set the following CSS style, works.

span { display: block; }

span is the tag that wraps the text inside the buttons.

Upvotes: 1

Related Questions