Using buttons instead of <a> with pseudo classes - is it wrong?

Question

On the page there are links displayed with CSS as buttons:

HTML:
    <a class="button" href="#">Button</a>
CSS:
    a.button {
        display: block;
        position: relative;
        width: 50px;
        height: 50px;
        background-color: $00f;
    }
    a.button:hover {
        background-color: $f00;
    }

I have some main concerns: The href value is encrypted, thus will appear messy and ugly when the address shows in the browser when the user hovers over the link:

http://mysite.com/shjfgkh53hhsfd9ah390503hh35323j5hj35909ufudufdjj3   

Also the href value will become significantly longer because I can't transfer POST parameters (everything's done by GET).

I could however, use this:

HTML:
    <input type="button" class="button" href="#" />

And then set the bg in CSS. I'm just not sure whether using pseudo classes like :hover is correct and standards compliant here. I personally thought :hover, :active, :visited etc were meant for links (i.e. a tags).

Clarifying this would really help me out a lot. Thanks!

Answer 1

They may not work correctly IE6, but all current browsers support this, and the spec doesn't forbid it: See here for the spec.

What matters is what's supported by browsers. Honestly, if they're using IE6 and something doesn't work...in this case it's not a breaking lack of functionality, your site works just fine even without. I'd say you're perfectly in the clear here.