Cara Membuat Tombol Download Keren dengan CSS

Cara Membuat Tombol Download Keren dengan CSS
Daftar Isi Artikel
Cara Membuat Tombol Download Keren

Renovasi Otak: Membuat Tombol Download Keren di Blog. Bagi blog yang berisi tentang berbagi file, pasti menyediakan link download pada artikel yang dibuat. Untuk membuat link tersebut menjadi menarik, alangkah baiknya kalian menggantinya dengan tombol download berikut agar terlihat lebih profesional.

Baca Juga: Cara Mengubah Desain Table dengan CSS

Pada kesempatan kali ini, admin akan berbagi tutorial membuat tombol download elegan dengan css. Dengan tampilan yang simple dan keren, pastinya akan membuat pelanggan setia anda tertarik untuk mendownloadnya.
Untuk tutorial membuatnya, kalian tinggal ikuti langkah demi langkah dibawah ini.

Cara Membuat Tombol Download di Blogger

  • Login ke akun Blogger kalian
  • Masuk ke menu  Template  ➤  Edit HTML 
  • Letakkan kode CSS dibawah ini tepat DIATAS kode ]]></b:skin> atau </style>
    /* DOWNLOAD BUTTON */
    .dlbutton br {display: none !important;}
    .dlbutton {
    margin: 0px auto;
    width: 200px;
    position: relative;
    z-index: 1;
    }
    .dlbutton a {
    color: white !important;
    display: block;
    width: 200px;
    height: 50px;
    background: #00897B;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font: 17px/50px Helvetica, Verdana, sans-serif;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&amp;amp;#39;#00b7ea&amp;amp;#39;, endColorstr=&amp;amp;#39;#009ec3&amp;amp;#39;,GradientType=0 );
    }
    .dlbutton a, .slide {
    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    }
    .slide {
    position: absolute;
    z-index: -1;
    display: block;
    margin: -50px 0 0 10px;
    width: 180px;
    height: 40px;
    background: #444;
    color: #fff;
    text-align: center;
    font: 12px/45px Helvetica, Verdana, sans-serif;
    -webkit-transition: margin 0.5s ease;
    -moz-transition: margin 0.5s ease;
    -ms-transition: margin 0.5s ease;
    -o-transition: margin 0.5s ease;
    transition: margin 0.5s ease;
    }
    .dlbutton:hover .bottom {
    margin: -10px 0 0 10px;
    }
    .dlbutton:hover .top {
    margin: -80px 0 0 10px;
    line-height: 35px;
    }
    .dlbutton a:active {
    background: #004D40;
    background: -moz-linear-gradient(top,  #00695C 36%, #0e6578 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00695C), color-stop(100%,#0e6578));
    background: -webkit-linear-gradient(top,  #00695C 36%,#0e6578 100%);
    background: -o-linear-gradient(top,  #00695C 36%,#0e6578 100%);
    background: -ms-linear-gradient(top,  #00695C 36%,#0e6578 100%);
    background: linear-gradient(top,  #4DB6AC 36%,#0e6578 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&amp;amp;#39;#00695C&amp;amp;#39;, endColorstr=&amp;amp;#39;black&amp;amp;#39;,GradientType=0 );
    }
    .dlbutton:active .bottom {
    margin: -20px 0 0 10px;
    }
    .dlbutton:active .top {
    margin: -70px 0 0 10px;
    }
    
  • Sampai disini tombol download sudah bisa dipakai. Untuk cara memakainya gunakan kode dibawah ini:
    <div class="dlbutton">
    <a href="https://renovasi-otak.blogspot.com" target="_blank">Download</a><br />
    <div class="slide top">Aplikasi</div>
    <div class="slide bottom">Size : 40 MB</div>
    </div>
    
Hasilnya akan seperti ini:
Download
Aplikasi
Size : 40 MB

Cukup mudah bukan? ya, itulah cara membuat tombol download keren. Semoga bermanfaat.

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>

Konten Unggulan