Button Multi Download Metro UI

Multi Button Download Metro UI - Sesuai pembahasan artikel sebelumnya button icon unik animasi css3 yang masih seputar blog metro style , kali ini saya akan memberikan lagi tips blog membuat tombol multi download metro ui dengan efek animasi CSS3. Tombol ini sangat cocok sekali buat kalian yang menyediakan file download dengan berbagai format sebagai contoh video dengan format misalnya 3gp, mp4, mpeg, dan lain - lain. Untuk tampilannya seperti dibawah ini :

DEMO

Untuk penggunaanya :

CSS

Code:

.download {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin: 2em auto;
    width: 100%;
    height: 60px;
    line-height: 60px;}
.download h1 {
    position: absolute;
    color: #fff;
    font: 0.6em;
    line-height: 60px;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #4f2c68;
transition: margin-left .6s cubic-bezier(.1, .7, .2, 1);}

.download:hover h1{
    margin-left: 98%;}

.download ul {
    display: inline-block;
    margin: 0;
    padding: 0;}

.download ul li {
    position: static;
    display: inline-block;
    padding: 0 .2em;}

.download ul li::before {
    display: none;
}

.download ul li a {
    color: #fff;
    font-size: 1.4em;
    margin: 0;
    padding: .3em .6em;
    background: none;}
.download-info{
    background: #16a085;}
.download-info h1{
    background-color: #1abc9c;}
.download-danger{
    background: #e67e22;}
.download-danger h1{
    background-color: #f39c12;}
.download-success{
    background: #27ae60;}
.download-success h1{
    background-color: #2ecc71;}
.download-warning{
    background: #8e44ad;}
.download-warning h1{
    background-color: #9b59b6}

HTML

Code:

<div class="download download-info">
<h1><i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li>[url=#]3gp[/url]</li>
<li>[url=#]MP4[/url]</li>
<li>[url=#]MPEG[/url]</li>
<li>[url=#]FLV[/url]</li>
</ul>
</div>

Code:

<div class="download download-danger">
<h1><i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li>[url=#]3gp[/url]</li>
<li>[url=#]MP4[/url]</li>
<li>[url=#]MPEG[/url]</li>
<li>[url=#]FLV[/url]</li>
</ul>
</div>

Code:

<div class="download download-success">
<h1><i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li>[url=#]3gp[/url]</li>
<li>[url=#]MP4[/url]</li>
<li>[url=#]MPEG[/url]</li>
<li>[url=#]FLV[/url]</li>
</ul>
</div>

Code:

<div class="download download-warning">
<h1><i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li>[url=#]3gp[/url]</li>
<li>[url=#]MP4[/url]</li>
<li>[url=#]MPEG[/url]</li>
<li>[url=#]FLV[/url]</li>
</ul>
</div>

Silakan pilih salah satu untuk variasi tombol downloadnya ( anda cukup mengganti tanda # dengan url yang ingin ditampilkan )

SOURCE

 

Cakep juga

Cakep juga

Code:

<i class="icon-download-alt">

Menampilkan icon / gambar download itu ya?

 

ini kreasi sendiri ya ??

ini kreasi sendiri ya ??

mantap dah perlu nanti dicoba *ROFL*