Κινούμενη εικόνα για 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMfI6uYI6tfYyrFEH5t_42TRdBqhCipsgZGdCzxs-kRGEqmCjhPatxZkGz3K4bWBRv0T-Mx8w-IHt-IlSITB6DSa1gOUJjRLfA8KDlippP-qn8CJM7vEQeC6bX8gBATqshcCP-yOnvgI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRmhzp05ca78xTlSZLI8fIIGMYsGOq3XTs6LxZpnFeUfKenqlACy5f0sf4VP26UL_lfef9Q8Ot-HXrMV-QfJRfLs7ya-2MmkAG6fzH5gvi-qMJVGF0HRRYnwwaK6j_WUT47vyhw7JFIpE/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="##" θα βάλετε το λινκ του αρχείου που έχετε για κατέβασμα...
   Σας δίνω και έναν απλό τρόπο να φτιάξετε τις δικές σας sprite εικόνες,

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

   Εάν η εφαρμογή της Κινούμενης εικόνας για download button από τον dr.blogger...για νέους bloggers... σας άρεσε, μπορείτε να αφήσετε ένα σχόλιο, ή κριτική παρακάτω ...