Multi Button 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 penggunaannya sebagai berikut :

CSS

.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

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

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

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

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

Anda cukup mengganti tanda # dengan link url download yang ingin anda tampilkan dan pilih salah satu untuk HTMLnya.

Demikian tips blog metro ui style kali ini semoga bermanfaat
Happy Blogging

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku