Tutorial HTML dan CSS: Membuat Tombol Download Menarik

Allow, bertemu kembali di blog AUTOGOBLOOG , sesi kali ini akan membawa pembahasan mengenai arti renovasi otak Tutorial HTML dan CSS: Membuat Tombol Download Menarik simak selengkapnya

Renovasi Otak - Bagi blog yang ampuh atas berbagi file, mencadangkan link download buat artikel yang dibuat. Untuk membuat link tersebut menjadi menarik, alangkah baiknya kalian menggantinya dengan tombol download biar terlihat kian 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 buat 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 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: 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='#00695C', endColorstr='black',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 aturan 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 jadinya akan seperti ini

DONASI VIA PAYPAL Bantu berikan bingkisan andaikata artikel bermanfaat. Donasi akan digunakan sebaik mungkin buat kepentingan renovasi-otak.blogspot.com. Terimakasih.

Sekian penjelasan tentang Tutorial HTML dan CSS: Membuat Tombol Download Menarik semoga tulisan ini bermanfaat salam

Artikel ini diposting pada label arti renovasi otak, blogger makanan,

Bagikan Artikel ini