Tombol Download Dengan CSS

CSS

.awesome, .awesome:visited {
    background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtW7nrgJ2xJKG_aJ2jnYC88SqQtRkYmKspHHL68ECWE8SGLFZs7XWkpwmLkFIWSr5aWftnMRBsbP8RtblHboTxRgsLrKUGE_a6ZQt2dVpuVSZPoZ73BE-oYkEpwa9vMCgEwmWykU_DXH0/s1600/alert-overlay.png) repeat-x;
    display:inline-block;
    padding:5px 10px 6px;
    color:#fff;
    text-decoration:none;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);
    text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
    border-bottom:1px solid rgba(0, 0, 0, 0.25);
    position:relative;
    cursor:pointer;
    font-family:Calibri, Arial, sans-serif
}
.awesome:hover {
    background-color:#111;
    color:#fff
}
.awesome:active {
    top:1px
}
.small.awesome, .small.awesome:visited {
    font-size:18px;
    padding:
}
.awesome, .awesome:visited, .medium.awesome, .medium.awesome:visited {
    font-size:24px;
    font-weight:bold;
    line-height:1;
    text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25)
}
.blue.awesome, .blue.awesome:visited {
    background-color:gold
}
.blue.awesome:hover {
    background-color:beige
}
.orange.awesome, .orange.awesome:visited {
    background-color:#ff5c00
}
.orange.awesome:hover {
    background-color:#d45500
}

HTML

<div style="text-align: center;">
 <a class="small blue awesome" href="URL FILE">BUTTON NAME</a>
</div>

Contoh :

DOWNLOAD

---

FILE NAME

Sumber : www.kasihmura.com