Stackoverflow - Embed image in a <button> element

http://stackoverflow.com/q/8683528/918414

by Thanos Saringelos

HTML

<div class='mydiv'> 
  <button id="close-image">
    <img class='' src="http://thinkingstiff.com/images/matt.jpg">
  </button>
</div>































































































































































































































































































































































































































































<script>
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-23915674-6']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();

  var headerUri = 'http://stackoverflow.com/q/8683528/918414',
    headerCaption = 'Embed image in a &lt;button&gt; element';
  document.body.insertAdjacentHTML(
    'afterBegin',
    '<a href="' + headerUri + '" ' +
    'target="_top" ' +
    'onmouseover="this.style.opacity=\'.95\'" ' +
    'onmouseout="this.style.opacity=\'1\'" ' +
    'style="' +
    'background-color: black;' +
    'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' +
    'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' +
    'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' +
    'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' +
    'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' +
    'border: 1px solid black;' +
    'border-radius:...

CSS

.mydiv{
  height:100px;
  width:200px;
  border:1px blue solid;
}

button {
    display: inline-block;
    height: 134px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 104px;
}

#close-image img {
    display: block;
    height: 130px;  
    width: 100px;
}