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
➤
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=&amp;#39;#00b7ea&amp;#39;, endColorstr=&amp;#39;#009ec3&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: 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=&amp;#39;#00695C&amp;#39;, endColorstr=&amp;#39;black&amp;#39;,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
Komentar
Posting Komentar