Membuat Tombol Download Dengan Efek Animasi Pure Css

Cara Membuat Tombol Download Dengan Efek Animasi Pure Css

Berikut ini adalah contoh dan cara penerapannya pada blog Anda. Untuk melihat efek animasinya, silahkan geser cursor anda pada icon download dibawah ini :

Download

Kode CSS

a.unduh-icon
{
    color: #333;
    font-size: 1.3rem;
    font-weight: bold;
    text-decoration: none;
}
.unduh-icon span
{
    display: block;
    cursor: pointer;
    position: relative;
    width: 60px;
    height: 30px;
    margin: auto;
    border: 10px solid #333;
    border-top: transparent;
}
.unduh-icon span:before,
.unduh-icon span:after
{
    content: '';
    display: block;
    position: absolute;
}
a.unduh-icon:hover span:before,
a.unduh-icon:hover span:after
{
    animation: bounce .5s infinite alternate;
    -webkit-animation: bounce .5s infinite alternate;
}

a.unduh-icon:hover span:before{
    left: 25px;
    top: -9px;
    width: 10px;
    height: 10px;
    background: #3BAFDA;
}
a.unduh-icon:hover span:after
{
    left: 20px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #3BAFDA;
}
@keyframes bounce {
  from {
    transform: translateY(-10px);
  }

  to {
    transform: translateY(0);
  }
}

@-webkit-keyframes bounce {
  from {
    -webkit-transform: translateY(-10px);
  }

  to {
    -webkit-transform: translateY(0);
  }
}

Kode HTML

<p style="text-align: center;">
    <a href="LINK ANDA DISINI" class="unduh-icon">
        <span></span>
        Download
    </a>
</p>