1 Κινούμενη εικόνα download button

Φίλοι bloggers σας έχω έναν κώδικα CSS για download button που η κίνηση του λειτουργεί όταν περνάτε τον κέρσορα πάνω από την εικόνα...Σας έχω και DEMO για τον κώδικα (το μπλε κουμπί στην κορυφή)....

Η εικόνα που βλέπετε αριστερά, δεν είναι αντιπροσωπευτική της ανάρτησης, μιας και είναι μια gif εικόνα για download ! Αλλά αν θέλετε, μπορείτε να τη χρησιμοποιήσετε, μιας και είναι η πιο απλή μορφή εικόνας download button , για όσους δεν μπορούν να εφαρμόσουν τον κώδικα....

Ο ΚΩΔΙΚΑΣ:

<style>
.download_button {
margin-bottom: 8px;
display: inline-block;
width: 170px;
height: 35px;
background: url(https://lh6.googleusercontent.com/-o31egKIwH2E/UcdSJI1S6tI/AAAAAAAAIAU/F4vu1zJxlYI/s170/download_button_sprites.png) no-repeat;
position: relative;
}
.download_button span {
text-indent: -1000px;
overflow: hidden;
position: absolute;
width: 32px;
left: 8px;
height: 35px;
background: url(https://lh4.googleusercontent.com/-15Lsz-fGRn4/UcdSJBrQfbI/AAAAAAAAIAQ/__aIK4jzMJg/s35/download_button_arrow.png) 0 0;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-ms-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.download_button:hover {
background-position: left bottom
}
.download_button:hover span {
background-position: 0 35px
}
</style>

<a class="download_button" href="##" rel="nofollow">
<span>
        Download Now
      </span>
</a>

***Εκεί που λέει   href="##"  θα βάλετε το λινκ του αρχείου που έχετε για κατέβασμα...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!