Tombol Unduh Animasi Untuk Video Kode dan File Untuk Blogger

Jika Anda menulis tentang desain web, blogger, atau topik teknis apa pun, maka Anda pasti menggunakan kode untuk menjelaskan berbagai hal dan memberikan opsi kepada pengguna Anda untuk mengunduh file jadi di sini ada beberapa tombol animasi yang dapat digunakan untuk hal-hal seperti: 

-Untuk mengunduh Kode dan Skrip . 
-Untuk mengunduh video. 
-Untuk mengunduh file.

• LIVE DEMO

Ada 3 tombol animasi yang dirancang mengagumkan berdasarkan CSS dan HTML yang bekerja di semua browser. Ketika pengguna mengarahkan kursor mouse mereka ke tombol-tombol itu maka animasi dimulai dan tombol-tombol melebarkan diri mereka sendiri di mouse. Ini dilakukan dengan efek CSS murni. Itu membuat posting Anda lebih profesional. 

Cara menginstal:
Instalasi cukup mudah. Tempatkan kode CSS di bawah ini. Anda harus menyalin kode ini ke template blogger Anda hanya untuk satu kali dan itu akan berfungsi setelah itu menggunakan Kode HTML terpisah untuk menggunakan setiap jenis tombol.

CSS

#animationcss .pure {
latar belakang: # E3E3E3 url ('https://lh3.googleusercontent.com/--e_YVckfUbg/TyvWSQ-Sa3I/AAAAAAAAAF_4/A6xydsmRC6E/d/refreshcode.png') 3px 0 no-repeat;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  display: blok;
  warna: # 212121;
  mengapung: tidak ada;
  tinggi: 80px;
  lebar: 80px;
  garis-tinggi: 80px;
  margin: 10px otomatis 0;
  padding-top: 1px;
  posisi: relatif;
  text-shadow: 0 1px 0 #FAFAFA;
  perataan teks: tengah;
  teks-dekorasi: tidak ada;
  white-space: nowrap;
  -webkit-transition: width .25s easy-in-out,
background-color .25s mudah-masuk;
  -ms-transisi: lebar .25s kemudahan masuk,
background-color .25s mudah-masuk;
  -moz-transisi: lebar .25s mudah-masuk,
background-color .25s mudah-masuk;
  -o-transisi: lebar .25s kemudahan masuk,
background-color .25s mudah-masuk;
  transisi: lebar .25s kemudahan masuk,
background-color .25s mudah-masuk;
  -webkit-box-shadow: inset 0 1px 0 # FAFAFA, rgba (0,0,0, .28) 0 2px 3px;
  -moz-box-shadow: inset 0 1px 0 # FAFAFA, rgba (0,0,0, .28) 0 2px 3px;
  -o-box-shadow: inset 0 1px 0 # FAFAFA, rgba (0,0,0, .28) 0 2px 3px;
  box-shadow: inset 0 1px 0 # FAFAFA, rgba (0,0,0, .28) 0 1px 3px;
}
#animationcss rentang {
  display: tidak ada;
}
#animationcss: arahkan kursor {
  display: inline;
}
#animationcss rentang {
  ukuran font: 1.4em;
}
#animationcss: hover .pure {
  lebar: 420px;
}
#animationcss .demo {
  background-position: 0 -80px;
}
#animationcss .info {
  posisi latar belakang: 0 -160px;
}
#animationcss .download {
  posisi latar belakang: 0 0;
}

Hit CTRL + F dan cari ]]> </ b:> skin  tag

Sekarang rekatkan Kode CSS di atas tepat sebelum tag ]]> </ b: skin> .

Bagian CSS selesai. 

HTML
Di bawah ini adalah 3 kode HTML untuk semua tombol 3. Sekarang jika Anda ingin menggunakan ketiga tombol di satu tempat kemudian salin seluruh kode dan rekatkan ke blogger post editor HTML. Sekarang ganti # dengan tautan Anda dan Anda selesai.

<div id = "animationcss"> 
<a href="#" class="pure demo"> <span> Tombol Untuk Video </span> </a> 
</div> 
<div id = "animationcss"> 
<a href = "#" class = "unduhan murni"> <span> Tombol Unduhan </span> </a> 
</div> 
<div id = "animationcss"> 
<a href = "#" class = "info murni" > <span> Tombol Pengaturan </span> </a> 
</div>

Dan untuk tombol yang terpisah pilih misalnya kode ini 

<div id = "animationcss"> 
<a href="#" class="pure unduhan"> <span> Tombol Unduhan </span> </a> 
</div>

Jadi dengan cara ini Anda dapat membuat blog blogger Anda lebih profesional dengan menambahkan kode unduh animasi, video dan tombol pengaturan yang didasarkan pada css dan html. Terima kasih telah melihat widget ini untuk blogger. Jika Anda suka, jangan ragu untuk berbagi atau berkomentar di bawah ini. Terima kasih!