Tutorial HTML dan CSS: Membuat Tombol Download Menarik

Hallo, bertemu kembali, pada kali ini akan membawakan tentang renovasi otak - dialog dini hari Tutorial HTML dan CSS: Membuat Tombol Download Menarik simak selengkapnya 

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

Baca Juga: Cara Mengubah Desain Table dengan CSS

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

Untuk tutorial 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 asas CSS dibawah ini tepat DIATAS asas ]]></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: keuntungan 0.5s ease;
-moz-transition: keuntungan 0.5s ease;
-ms-transition: keuntungan 0.5s ease;
-o-transition: keuntungan 0.5s ease;
transition: keuntungan 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 benjol download sudah bisa dipakai. Untuk kaidah memakainya gunakan asas 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 jadinya hendak seperti ini

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

begitulah detil tentang Tutorial HTML dan CSS: Membuat Tombol Download Menarik semoga artikel ini menambah wawasan terima kasih

tulisan ini diposting pada tag renovasi otak - dialog dini hari, blogger masuk, renovasi otak download, , tanggal 27-09-2019, di kutip dari https://renovasi-otak.blogspot.com/2019/07/membuat-tombol-download-dengan-css.html