Non-clickable area on transforming anchor - html

Question

Here is my fiddle: http://jsfiddle.net/olexander/7hB8C/
I have an anchor, which is styled as a button (the styles are simplified to show the issue).
HTML:
Button
CSS:
.button {
border: none;
outline: none;
text-decoration: none;
display: inline-block;
}
.button:active {
transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
-moz-transform: scale(0.8, 0.8);
-o-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
}
.demo {
padding: 40px;
margin: 20px;
font-size: 5em;
color: black;
background-color: lightgray;
}
The issue is that there is a non-clickable area inside the link-button.
I can explain it that there is a text node inside the anchor, and when mousedown goes to the text node, after transform, mouseup comes outside the text node. That's why mouseclick is not processed.
If we select the text node inside the anchor, it can be visualized like this (before and after mousedown):
I would like to notice, that the issue is reproduced at least in Chrome, Opera and Safari, and even if I put a link to href tag instead of handling click event. It is also reproduced with <button>, and not the issue for <input type="button">, because the first one uses content, and the second value.
Does anyone have ideas about better ways to avoid or workaround this behavior? Thanks in advance!
UPDATE:
I found a solution using a streched "stub" <span> to override the clickable area:
<span class="stub"></span>Button
and the stub styles:
.button > span.stub {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
This version is published here: http://jsfiddle.net/olexander/7hB8C/20/
The stub can be added dynamically by javascript, but the idea remains the same.
Since the inline span element can be nested inside anchors and buttons, it doesn't break the W3C HTML5/XHTML5 rules.
And Aequanox made the solution perfect! Look at the answer below.
The whole story is published here: Animated anchor and button with css3

Answer 1

You could avoid inserting the tag, thus mantaining the markup cleaner, by inserting this in the css:
.button:before{
content:'';
position:absolute;
top:0; left:0; right:0; bottom:0;
}
The text will not be selectable though

Answer 2

It seems the :active transition is replacing the click event. I'd consider this a browser bug.
Here I've changed :active to a class name .active and apply is in your event handler:
$('#linkbutton').click(function(){
$(this).addClass('active');
$(this).delay(200).queue(function() { $(this).removeClass('active');})
$('#logContainer').append('<span>clicked </span>');
});
For some reason this didn't work until I changed .button from:
display: inline-block;
to:
float: left;
Go figure... It works now though.