按钮调整大小改变所有设计

Question

嗨我创建一个使用三个div的按钮，所有div都有背景图像。这就是它的样子。

Button Demo

按钮很好，但我怎样才能调整大小？我喜欢

.btncontainer{
    position:absolute;
    top:120px;
    left:120px; cursor:pointer;
     display:inline-block;
    width:120px;
    height:20px;
}

但它正在改变按钮设计。我该怎么做才能动态调整文本大小？

如果尺寸发生变化，我希望看起来像这样，例如这个图像有不同的尺寸。

因此，当我更改.btncontainer时，它应该更改其中元素的宽度和高度，但这不会发生

Answer 1

正如你在上层评论中所做的那样;在这种特殊情况下，您必须使用左右div的图像。我建议你在html代码中为它们设置一个合适的高度。 这不是最佳做法，但会根据您的需求开展工作。 请参阅以下示例。

请注意，您必须更改#backgrounddiv高度和行高才能匹配。

请参阅小提琴here

CSS

.btncontainer{
  position:absolute;
  top:180px;
  left:10px; cursor:pointer;
  display:inline-block;
}

#leftdiv{
  float:left;
}

#backgrounddiv{
  background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
  float:left;
  height:40px;
  padding:10px;

  line-height:40px;
}

#rightdiv{
   float:left;
}

HTML

<div class="btncontainer" id="button">
  <a href="#">
    <div id='leftdiv'>
      <img src="http://i.share.pho.to/ff6cc4e3_o.png" height="70px" />
    </div>
    <div id='backgrounddiv'>CLick Me </div>
    <div id='rightdiv'>
      <img src="http://i.share.pho.to/245be416_o.png" />
    </div>
</div>