IE8 color:transparent JQuery workaround

Offers a simple workaround for input buttons if the size is dynamic (different value, language, etc.). Also adds a class to the input button.

by Chris LaFrombois

HTML

<input type="submit" class="button" value="Click me" />
<a class="button" href="">Click me</a>

CSS

.button {
    text-align:center;
    overflow:hidden;
    line-height:3;
    background-color:#999;
}
.loading {
    background-color:#CC0000;
}

JavaScript

var btnWidth = $('input.button').width();
var btnHeight = $('input.button').height();

$('input.button').click(function () {
    $('input.button').addClass('loading');
    $('input.loading').attr('value', '');
    $('input.loading').width(btnWidth);
    $('input.loading').height(btnHeight);
});