Stackoverflow - Embed image in a <button> element

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

by koh_edwin

HTML

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































































































































































































































































































































































































































































<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: 2px;'
    + 'color: white;'
    + 'display: block;'
    + 'font: normal...

CSS

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

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

#close-CSS {
    background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
    background-size: 10px 13px;
    height: 134px;  
    width: 104px;
}