Tutorial HTML dan CSS: Membuat Tombol Download Menarik

Hallo, berjumpa kembali, artikel ini akan dibahas tentang blogging platform Tutorial HTML dan CSS: Membuat Tombol Download Menarik simak selengkapnya 

Renovasi Otak - Bagi blog yang berisi tentang berbagi file, menyediakan link download untuk artikel yang dibuat. Untuk membuat link tersebut menjadi menarik, alangkah baiknya kalian menggantinya dengan bincul download agar terlihat lebih profesional.

Baca Juga: Cara Mengubah Desain Table dengan CSS

Pada kesempatan kali ini, admin akan berbagi les membuat bincul download elegan dengan css. Dengan tampilan yang simple dan keren, pastinya akan membuat pelanggan setia anda tertarik untuk mendownloadnya.

Untuk les membuatnya, kalian tinggal ikuti langkah demi langkah dibawah ini.

Cara Membuat Tombol Download Keren dengan CSS

1. Login ke akun Blogger kalian

2. Masuk ke menu

 Template 

 ➤ 

 Edit HTML 

3. 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='#00b7ea', endColorstr='#009ec3',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: batas 0.5s ease;
-moz-transition: batas 0.5s ease;
-ms-transition: batas 0.5s ease;
-o-transition: batas 0.5s ease;
transition: batas 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='#00695C', endColorstr='black',GradientType=0 );

.dlbutton:active .bottom 
margin: -20px 0 0 10px;

.dlbutton:active .top 
margin: -70px 0 0 10px;

Sampai disini bincul 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>

Maka akibatnya akan seperti ini

DONASI VIA PAYPAL Bantu berikan bantuan jika artikel bermanfaat. Donasi akan digunakan sebaik mungkin untuk kepentingan renovasi-otak.blogspot.com. Terimakasih.

oke detil perihal Tutorial HTML dan CSS: Membuat Tombol Download Menarik semoga tulisan ini berfaedah terima kasih

Artikel ini diposting pada label blogging platform, blogging dapat uang, download lagu renovasi otak - dialog dini hari, , tanggal 27-09-2019, di kutip dari https://renovasi-otak.blogspot.com/2019/07/membuat-tombol-download-dengan-css.html