Problème avec le ":active" ! Assez Urgent !

Bonjour,

Je souhaite créer un calendrier de l'Avent en HTML5/CSS3 sans rien utiliser de compliquer. Le site est hebergé par Google Drive, (sans problème) et est pour les membres d'un clan sur le jeu World of Tanks.
Voici le Links : https://googledrive.com/host/0BzInHTDBvueidHFGTVgxaS05WXM/calendrier_avent_02DTC.html

Le problème ???
J'aimerais créer un effet pour que lorsque l'on clique sur un des boutons, il se lève de 2px. Activer un Top:2px en gros.
Là intervient le problème : Regardez dans le site, j'ai essayer de le faire pour le "01 décembre" .Le bouton se lève jusqu'à tout en haut sans activer le lien !!!

Je vous donne donc le code CSS3 : (le partie concernant le bouton 1, "monBouton")
(le .Dive c'est le header) .
[[Pour le code html, voyez le code source de la page]]

body {
background-image: url("noel.jpg");
}
@-webkit-keyframes greenPulse {
from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #acf53d; -webkit-box-shadow:: 0 0 18px #acf53d; }
to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}
@-webkit-keyframes redPulse {
from { background-color: #a2285e; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #eb6aa3; -webkit-box-shadow:: 0 0 18px #eb6aa3; }
to { background-color: #a2285e; -webkit-box-shadow:: 0 0 9px #333; }
}
@-webkit-keyframes violet {
from { background-color: #62016d; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #c437d3; -webkit-box-shadow:: 0 0 18px #c437d3; }
to { background-color: #62016d; -webkit-box-shadow:: 0 0 9px #333; }
}
.dive {
position:absolute;
background-color:#4f4fd9;
opacity:0.85;
font-family: Century Gothic, Light ;
height: 60px;
width: 950px;
top: 20px;
left: 210px;
border-radius:10px;
text-align:center;
box-shadow: 10px 10px 50px black;
}
a.monBouton {
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}

.monBouton {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:#222222 url(overlay-button.png) repeat-x scroll 0 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.246094);
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
color:#FFFFFF !important;
cursor:pointer;
display:inline-block;
font-size:20px;
font-weight:bold;
line-height:1;
overflow:visible;
padding:10px 30px 12px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
font-size:14px;
padding:16px 30px 18px;
background-color:#91BD09;
top:110px;
left:15px;
box-shadow: 10px 10px 50px black;

}
.monBouton::-moz-focus-inner {
border:0 none;
padding:0;
}
.monBouton:hover {
background-color:#111111;
color:#FFFFFF;
}
.monBouton:active{
top:2px
}






Je vous remercie donc d'avance de me dire quel est le problème...
Cordialemment,
Antoine.