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

Kώδικα 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/AVvXsEjxuEGOc0avRkK6hU4m149X12rX1H36GQrxg9SrTtM0dY63WeZGlHVlvulx2sFGlYooauwzvxI4Bsf2itsa8VfOu1vvIHJYt1ycrX-3S7ueOM8qHePbFejhPSU47PyG0fExk-x64q9DT48/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/AVvXsEgGzXBmtMsZCbW0arNPYSrCi_DKUd9ID_ilSyrkkPHI9g0JcrloMBpBECRNRoTgHwb1hfJnvTm1B7Gg_APxYJHKuraICQT3cmkesifHdNLYdCcg5bsn2N4EY0Ixo4CvJM4njCsPfyZjKkI/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="##"  θα βάλετε το λινκ του αρχείου που έχετε για κατέβασμα...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!

dr-blogger.com