使用css构建具有图像,文本和链接的响应按钮

Question

我尝试了几件事,但我运气不好.我需要在按钮背景图像上构建一个包含图像和文本的按钮.此外,点击按钮内的任何位置都应重定向到某个页面,例如google.com.这就是按钮的外观

我遇到的挑战是,当按钮文本发生变化或屏幕尺寸发生变化时,图像和文本的对齐方式会变得混乱.如果它太大,我想包装按钮文本.如何包装按钮文本并仍然正确对齐所有内容？此外,我希望按钮宽度与我必须构建具有不同文本和图像的相同尺寸的多个按钮相同.非常感谢.一个更快的解决方案将被欣赏,因为我急于看到我做错了什么.这是我到目前为止的代码:JSFiddle

<a href="https://www.google.com" style="color: white !important; background-color: #7FFF00;padding: 25px;width: 50px;"> 
    <span style="margin-bottom: 5%;"> 
        <img src="http://placehold.it/30x30" height:100%; style="display: inline-block;" width="30" height="30" /> 
        <span style="display: inline-block;"> 
            <b><font size ="2" color="BLACK" face="Arial">CLICK ON THE IMAGE TO VIEW MORE DETAILS ABOUT THE ITEM </font> </b> 
        </span> 
    </span> 
</a> 

Answer 1

img{
  width:30px;
  height:30px;
}
a{
text-decoration:none;
color:black;}
#img{
  float:left;
}
#img,#text{
 display:inline;
}

#main{
  margin-top:20px;
  width:250px;
  border:2px solid black;
  border-radius:10px;
  background:yellowgreen;
}
#container{
  margin:15px;
  }
div.clickable {
    position:relative;
}
div.clickable #mainlink {
    position:absolute;
    width:100%;
    height:100%;
}

<div class="clickable">
<a href="www.google.com" id="mainlink">
<div id="main">
<div id="container">
<div id="img">
<a href="www.google.com"><img src="http://oer.nios.ac.in/wiki/images/thumb/4/47/Thumpsup.png/200px-Thumpsup.png"/></a>
</div>
<div id="text">
<span>Click on the image to view more about the item</span>
</div>
</div>
</div>
  </a>
  </div>