Transition en css "après" un clic sur un lien. Possible ?

Bonjour à tous, alors voila il m'est venu une idée, j'aimerai appliquer une transition sur un lien, mais après avoir cliqué dessus.

Je m'explique:

J'ai réalisé un petit bouton qui lorsque l'on clique dessus se décale de 1 pixel vers le bas.

Voici mon code:

<a class="lirearchives" href="http://site.com">Lien vers l'article</a>

a.lirearchives {
     padding: 6px 11px 5px;
     margin: 4px 7px 0 0;
     background-color: #b8077d;
     background-image: -webkit-gradient(linear, left top, left bottom, from(#dc0087), to(#b8077d));
     background-image: -webkit-linear-gradient(top, #dc0087, #b8077d); /* Saf4+, Chrome */
     background-image: -moz-linear-gradient(top, #dc0087, #b8077d); /* Chrome 10+, Saf5.1+ */
     background-image: -ms-linear-gradient(top, #dc0087, #b8077d); /* FF3.6 */
     background-image: -o-linear-gradient(top, #dc0087, #b8077d); /* IE10 */
     background-image: linear-gradient(top, #dc0087, #b8077d); /* Opera 11.10+ */
     filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#dc0087', EndColorStr='#b8077d');
     -moz-border-radius: 12px; /* IE6a IE9  */
     -webkit-border-radius: 12px;
     border-radius: 12px;
     -moz-box-shadow: 0 0 5px #b3b3b3, inset 0px 1px 0px 0px #e271a9;
     -webkit-box-shadow: 0 0 5px #b3b3b3, inset 0px 1px 0px 0px #e271a9;
     box-shadow: 0 0 5px #b3b3b3, inset 0px 1px 0px 0px #e271a9;
     border: 1px solid #b8077d;
     display: inline-block;
     color: #f7ddc8;
     font-family: arial;
     font-size: 12px;
     font-weight: bold;
     text-decoration: none;
     text-shadow: 1px 1px 0px #800958 }
 
a.lirearchives:hover {
     background-color: #dc0087;
     background-image: -webkit-gradient(linear, left top, left bottom, from(#dc0087), to(#dc0087));
     background-image: -webkit-linear-gradient(top, #dc0087, #dc0087); /* Saf4+, Chrome */
     background-image: -moz-linear-gradient(top, #dc0087, #dc0087); /* Chrome 10+, Saf5.1+ */
     background-image: -ms-linear-gradient(top, #dc0087, #dc0087); /* FF3.6 */
     background-image: -o-linear-gradient(top, #dc0087, #dc0087); /* IE10 */
     background-image: linear-gradient(top, #dc0087, #dc0087); /* Opera 11.10+ */
     filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#dc0087', EndColorStr='#dc0087');
     color: #fff /* IE6a IE9 */ }
 
a.lirearchives:active { position:relative; top:1px }
 
a.lirearchives:focus,a.lirearchives:active { outline:0 }

Sachant qu'il y a toujours un petit temps (très légé certe, mais bien présent) entre le clic et le chargement de la page appelée, j'aimerai que, après avoir cliqué sur le lien, ce dernier retourne (remonte) beaucoup plus doucement à sa position initale.


Bref, est-ce possible ?

Merci, Laurent
Modifié par LuciferX (21 Aug 2011 - 16:20)

Tu pourrais utiliser Ajax pour éviter le rechargement de la page. Autrement, je ne crois pas que ce soit possible.

ok merci, en même temps, l'idée était un peu fofole !

Mais malgré tout je trouvais intéressant de poser la question car comme on dit: "on ne sait jamais"
Modifié par LuciferX (17 Sep 2011 - 14:39)