3 ΦΤΙΑΞΤΕ ANIMATED LINK ΜΕ CSS

Φίλοι bloggers, με ένα κώδικα css μπορείτε να κάνετε έξυπνα και εντυπωσιακά link!!!
Μπορείτε να φτιάξετε ένα link που να αλλάζει χρώματα η ακόμα και να βάλετε ένα ολόκληρο κείμενο που να αλλάζει χρώματα και εικόνες, σαν να έχετε φτιάξει flash η gif αρχείο....Demo σας έβαλα στο τέλος της ανάρτησης....Μη φοβηθείτε να κάνετε τα δικά σας πειράματα με αυτούς τους κώδικες !!!

ΚΩΔΙΚΕΣ:
1ο.Φράση με φόντο άσπρο-μαύρο

/*-- Black & white--*/
.dr-blogger{
background:#000800;
text-align:left;
cursor:pointer;
color:#fff;
margin:5px 0;
float:left;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 13px sans-serif;
}
.dr-blogger:hover{
background:#fff;
font:bold 13px sans-serif;
color:#000800;
border:2px solid #000800;
}
.dr-blogger a {
color:#fff;
text-decoration:none;
}
.dr-blogger a:hover {
color:#fff;
text-decoration:none;
}
</style>

<a  target="_blank"  href='##'>
<div class="dr-blogger" >ΠΕΡΑΣΤΕ ΤΟ ΠΟΝΤΙΚΙ ΣΑΣ ΝΑ ΔΕΙΤΕ ΤΟ ΕΦΕ</div></a>

2o.Με 1 εικόνα και μεγεθυνση
<style>
/*-- small and bigger--*/
.dr-blogger1{
background:#0404B4;
text-align:left;
cursor:pointer;
color:#fff;
margin:5px 0;
float:left;
border:2px solid #81DAF5;
padding:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 13px sans-serif;
}
.dr-blogger1:hover{
background:#FACC2E;
font:bold 16px sans-serif;
color:#000800;
border:2px solid #000800;
}
.dr-blogger1 a {
color:#fff;
text-decoration:none;
}
.dr-blogger1 a:hover {
color:#fff;
text-decoration:none;
}
</style>

<a  target="_blank"  href='##'>
<div class="dr-blogger1" >Mickey Mouse<img src="http://cursors1.totallyfreecursors.com/thumbnails/hand91.gif" width=32 height=32 ></div></a>

3o.Με 2 εικόνες...
<style>
/*--  2 images--*/
.dr-blogger2{
background:#8A0808;
text-align:left;
cursor:pointer;
color:#fff;
margin:5px 0;
float:left;
border:2px solid #81DAF5;
padding:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 13px sans-serif;
}
.dr-blogger2:hover{
background:#BFFF00;
font:bold 12px sans-serif;
color:#000800;
border:2px solid #000800;
}
.dr-blogger2 a {
color:#fff;
text-decoration:none;
}
.dr-blogger1 a:hover {
color:#fff;
text-decoration:none;
}
</style>

<a  target="_blank"  href='##'>
<div class="dr-blogger2" >Ανοίξτε ΕΔΩ<br/><img src="http://www.animatedgif.net/arrowpointers/arrow.rt.spin_e0.gif" width=45 height=32 ><img src="http://www.freesmileys.org/emoticons/emoticon-games-015.gif" width=32 height=32 ></div></a>

***Αλλάξτε τα χρώματα  η τις εικόνες που χρησιμοποιώ εγώ, καθώς και τις φράσεις η τα μεγέθη των γραμματοσειρών (για να αλλάξει το μέγεθος).....
Κάντε τα δικά σας πειράματα για να μάθετε, όσοι δεν γνωρίζετε, πως αλλάζει ένας κώδικας css !!!
*** DEMO =>

ΠΕΡΑΣΤΕ ΤΟ ΠΟΝΤΙΚΙ ΣΑΣ ΝΑ ΔΕΙΤΕ ΤΟ ΕΦΕ

Mickey Mouse

Ανοίξτε ΕΔΩ

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!