html - Build responsive button with image, text and a link using css -

i tried several things out of luck. need build button containing image , text on button background image. also, clicking anywhere inside button should redirect page, example, google.com. how button should

the challenge having when button text changes or when screen size changes, alignment of image , text gets messed up. want wrap button text if large. how wrap button text , still align correctly? also, want button width same have build multiple buttons of same size varied texts , images. thank much. quicker solution appreciated anxious see doing wrong. here code have far: 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 image view more details item </font> </b>          </span>      </span>  </a>  

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 image view more item</span>  </div>  </div>  </div>    </a>    </div>