Problem with a:active

I have the following:

<a class="ButtonLink" href="http://www.url.com/index.php"></a>

Code (markup):

and here the css settings:

.siteHeader .ButtonLink {
    background-image: url("button.png");
    background-position: 50% 4%;
    background-repeat: no-repeat;
    height: 76px;
    left: 318px;
    position: absolute;
    top: 25px;
    width: 181px;
}
.siteHeader .ButtonLink:hover {
    background-image: url("button2.png");
    background-position: 50% 102%;
}
.siteHeader .ButtonLink:active {
    background-image: url("button2.png");
    background-position: 50% 102%;
}

Code (markup):

I dont know why, but when im at http://www.url.com/index.php its not changing..

Is that working only under <ul><li> tags or it should work any way?

Please help me.

 

You need to have these diffrent in order to see some change , what diffrence will it make with the same on hover and active , change the values here to see the change

.siteHeader .ButtonLink:hover {
[COLOR="red"]    background-image: url("button2.png");
    background-position: 50% 102%;[/COLOR]
}
.siteHeader .ButtonLink:active {
[COLOR="red"]    background-image: url("button2.png");
    background-position: 50% 102%;[/COLOR]
}

Code (markup):

 

Thats what he is trying to get, hover and active that will be the same... Good luck mate..