Why does the css button lose its style when clicked?

Question

Im totally lost with this. So, I am creating a button with CSS, take a look at the CSS code:

.UploadPhotos a:link{
    display:block;
    width:100px;
    height:22px;
    padding-top:2px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    background:url(../images/btn_image.png) 0 0 no-repeat;
    text-decoration:none;
    color:#FFF;
}
.UploadPhotos a:hover{
    background-position: 0 -24px;
    text-decoration:none;
    color:#060;
}
.UploadPhotos a:active{
    background-position: 0 0px;
    text-decoration:none;
    color:#FFF;
}
.UploadPhotos a:visited{
    background-position: 0 0px;
    text-decoration:none;
    color:#FFF;
}

Now here is the HTML code:

<div class="UploadPhotos">
    <a id="UpLd" href="uploader/upload.php">Upload Photos</a>
</div>

The problem starts when I click on it. The link opens another page in the iframe, which is executed using js. As soon as I click on this button, all styles of this button will disappear. I get the same problem even if I set href = "#" in the link. Therefore, I do not believe that he will open the page. I can’t understand why the style suddenly disappears after clicking.

I added images to give you guys an idea:

Usual

Hover

After pressing

Selecting text after clicking

Answer 1

:link " ", " ".

, ( , , ), :

.UploadPhotos a {}

.UploadPhotos a:link,
.UploadPhotos a:visited {}

Answer 2

a: visited a: . , . , . , ( ), , .

:

.UploadPhotos a {
display:block;
width:100px;
height:22px;
padding-top:2px;
margin-left:auto;
margin-right:auto;
text-align:center;
background:url(../images/btn_image.png) 0 0 no-repeat;
text-decoration:none;
color:#FFF;
}