Animating Download Button

Written by @kerixa 27 March 2021

To display downloads, instead of using a simple link, you can use a beautiful and animating style which also shows the name and size of the file. Using this style will make the appearance of your website more beautiful, and helps the user find the download link more easily. Use the following code for this purpose and enjoy!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
.download_button {
    text-decoration: none;
    display: block;
    height: 110px;
    padding: 1px;
    border: 1px solid #8ebd17;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color: #2a3807;
    text-shadow: 0 0 15px #7da616;
    font-size: 16px;
}

.download_button .filename {
    font-size: 32px;
    margin: 10px 20px 0;
}

.download_button .filesize {
    margin: 10px 20px 0;
}

.download_button .downloads {
    margin: 5px 20px 0;
}

.download_button .downloadicon {
    position: relative;
    float: right;
    margin: 10px;
    width: 140px;
    height: 90px;
}

@-webkit-keyframes movedown {
0% {
    -webkit-transform: translateY(-1.5em);
    opacity: 0;
}

50% {
    -webkit-transform: translateY(0);
    opacity: 1;
}

100% {
    -webkit-transform: translateY(1.5em);
    opacity: 0;
}
}

@-moz-keyframes movedown {
0% {
    transform: translateY(-1.5em);
    opacity: 0;
}

50% {
    transform: translateY(0);
    opacity: 1;
}

100% {
    transform: translateY(1.5em);
    opacity: 0;
}
}

@-o-keyframes movedown {
0% {
    -o-transform: translateY(-1.5em);
    opacity: 0;
}

50% {
    -o-transform: translateY(0);
    opacity: 1;
}

100% {
    -o-transform: translateY(1.5em);
    opacity: 0;
}
}

@keyframes movedown {
0% {
    transform: translateY(-1.5em);
    opacity: 0;
}

50% {
    transform: translateY(0);
    opacity: 1;
}

100% {
    transform: translateY(1.5em);
    opacity: 0;
}
}

.download_button .cloud {
    width: 140px;
    height: 50px;
    background-color: #fff;
    border-radius: 30px;
    position: absolute;
    top: 40px;
}

.download_button .cloud:before {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    top: -30px;
    left: 70px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    box-shadow: -40px 0 0 10px #fff;
}

.download_button .cloud .arrowdown {
    background: #aedb3d;
    position: absolute;
    top: -10px;
    left: 60px;
    width: 10px;
    height: 40px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-animation: movedown 2s infinite linear;
    -moz-animation: movedown 2s infinite linear;
    -o-animation: movedown 2s infinite linear;
    animation: movedown 2s infinite linear;
}

.download_button .cloud .arrowdown:before,
.download_button .cloud .arrowdown:after {
    top: 14px;
    content: "";
    position: absolute;
    background: #aedb3d;
    position: absolute;
    width: 10px;
    height: 25px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.download_button .cloud .arrowdown:before {
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 70% 90%;
}

.download_button .cloud .arrowdown:after {
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: 30% 90%;
}

.download_button {
    background: #aedb3d; /* Old browsers */
    background: -moz-linear-gradient(top, #aedb3d 0%, #9fcb31 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aedb3d), color-stop(100%,#9fcb31)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #aedb3d 0%,#9fcb31 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #aedb3d 0%,#9fcb31 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #aedb3d 0%,#9fcb31 100%); /* IE10+ */
    background: linear-gradient(to bottom, #aedb3d 0%,#9fcb31 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aedb3d', endColorstr='#9fcb31',GradientType=0 ); /* IE6-9 */
}
</style>
<a href="#" class="download_button">
    <div class="downloadicon">
       <div class="cloud"><div class="arrowdown"></div></div>
    </div>
    <div class="filename"><span class="value">File.zip</span></div>
    <div class="filesize">Size : <span class="value">19 MB</span></div>
    <div class="downloads">Downloads : <span class="value">72</span></div>
</a><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300