Tombol Unduh Animasi CSS3 Terbaik untuk Blogger

• HASIL

Setelah Anda melihat demo, untuk menambahkan tombol unduh animasi ini ke posting blog Anda, ikuti langkah-langkah di bawah ini.

Tombol ini terdiri dari Pure CSS3 yaitu tanpa menggunakan Gambar atau JavaScript apa pun. Tombol ini mungkin sangat membantu untuk blog unduhan game / software. Jadi demo kerja langsung dari tombol ini dapat dilihat dengan mengklik tombol di atas. Anda akan melihat tombol di codepen.

Menambahkan CSS di Templat 
Buka Blog Judul → Templat → Edit HTML dan cari kode </body> dan tempel kode yang diberikan di bawah ini tepat di atas </body> .

<style> 
.abt-button { 
    margin: 50px auto; 
    lebar: 200px; 
} 
 / * Dapatkan tombol ini di http://blogger-templatees.blogspot.com * / 
.abt-button a { 
    background: -moz-linear-gradient (tengah atas, # 00B7EA 0%, # 009EC3 100%) gulir berulang 0 0 transparan; 
    warna putih; 
    display: blok; 
    font: 17px / 50px Helvetica, Verdana, sans-serif; 
    tinggi: 50px; 
    perataan teks: tengah; 
    teks-dekorasi: tidak ada; 
    text-transform: huruf besar; 
    lebar: 200px; 
    posisi: relatif; 
    z-index: 2;   teks-dekorasi: tidak ada;   perataan teks: tengah;   text-transform: huruf besar;
  / * JENIS * / 
  warna: putih; 
  font: 17px / 50px Helvetica, Verdana, sans-serif;



  / * GRADIENT * / 
  latar belakang: # 00b7ea; / * Browser lama * / 
  latar belakang: -moz-linear-gradient (atas, # 00b7ea 0%, # 009ec3 100%);/ * FF3.6 + * / 
  latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (0%, # 00b7ea), color-stop (100%, # 009ec3)); / * Chrome, Safari4 + * / 
  latar belakang: -webkit-linear-gradient (atas, # 00b7ea 0%, # 009ec3 100%); / * Chrome10 +, Safari5.1 + * / 
  latar belakang: -o-linear-gradient (atas, # 00b7ea 0%, # 009ec3 100%); / * Opera 11.10+ * / 
  latar belakang: -ms-linear-gradient (atas, # 00b7ea 0%, # 009ec3 100%); / * IE10 + * / 
  latar belakang: gradien linier (atas, # 00b7ea 0%, # 009ec3 100%); / * W3C * /
  filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = & # 39; # 00b7ea & # 39 ;, endColorstr = & # 39; # 009ec3 & # 39;, GradientType = 0); / * IE6-9 * / 
} 
.abt-tombol a, .abt-tombol p { 
    -webkit-border-radius: 10px; 
     -moz-border-radius: 10px; 
          border-radius: 10px; 
  -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); 
} 
.abt-button p { 
    background: # 222222; 
    warna: #FFFFFF; 
    display: blok; 
    font: 12px / 45px Helvetica, Verdana, sans-serif; 
    tinggi: 40px; 
    margin: -40px 0 0 10px;
    posisi: absolut; 
    perataan teks: tengah;
    transisi: margin 0,5 kemudahan 0s; 
    lebar: 180px; 
    z-index: 1; 
  / * TRANSISI * / 
  -webkit-transisi: margin 0,5 kemudahan; 
     -moz-transisi: margin 0,5 kemudahan; 
       -o-transisi: margin 0,5 kemudahan; 
      -ms-transisi: margin 0,5 kemudahan; 
          transisi: margin 0,5 kemudahan; 
} 
.abt-button: hover .up { 
    margin: -5px 0 0 10px! important; 
} 
.abt-button: hover .down { 
    line-height: 35px! important; 
    margin: -85px 0 0 10px! penting; 
} 
.abt-button a: active { 
background: # 00b7ea; / * Browser lama * /
latar belakang: -moz-linear-gradient (atas, # 00b7ea 36%, # 009ec3 100%);/ * FF3.6 + * /
latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (36%, # 00b7ea), color-stop (100%, # 009ec3)); / * Chrome, Safari4 + * / 
background: -webkit-linear-gradient (atas, # 00b7ea 36%, # 009ec3 100%);/ * Chrome10 +, Safari5.1 + * / 
latar belakang: -o-linear-gradient (atas, # 00b7ea 36%, # 009ec3 100%); / * Opera 11.10+ * / 
latar belakang: -ms-linear-gradient (atas, # 00b7ea 36%, # 009ec3 100%); / * IE10 + * / 
latar belakang: gradien linier (atas, # 00b7ea 36%, # 009ec3 100%); / * W3C * / 
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = & # 39; # 00b7ea & # 39 ;, endColorstr = & # 39; # 009ec3 & # 39;, GradientType = 0); / * IE6-9 * /
} 
.abt-button: active .up {
    margin: -20px 0 0 10px! penting; 
} 
.abt-button: active .down { 
    margin: -70px 0 0 10px! important; 
} 
</style>

Setelah menambahkan kode simpan template dan ikuti langkah selanjutnya.

Menambahkan Tombol

Jadi karena kami telah menambahkan CSS, kami hanya perlu menambahkan HTML di tempat yang diinginkan. Jadi, setiap kali Anda ingin menambahkan tombol ini ke posting Anda, alihkan saja editor posting ke HTML dari Compose dan tambahkan HTML di bawah ini.

<div class = "abt-button"> 
      <a href=" # "> Unduh </a> 
      <p class = "up"> klik untuk memulai </p> 
      <p class = "down"> 1.2MB .zip </p> 
    </div>

Setelah menambahkan perubahan HTML # dengan URL file yang akan diunduh. Ubah 1.2MB .zip dengan ukuran dan ekstensi file.

Anda selesai sekarang. Sekarang Anda dan pengunjung Anda dapat melihat tombol unduh animasi Murni CSS3 yang mengagumkan ini di blog Anda