› › ›

Cara membuat tombol download dengan efek animasi keren

Update :

nafasmedia | halo apa kabar semua? berjumpa lagi dengan saya, yang sudah lama sekali tidak upload postingan diblog ini. dikarenakan saya lebih fokus keblog film saya filmmedia, terakhir saya post artikel diblog ini adalah bulan april. berarti saya sudah 2 bulannan tidak mengurus lagi blog ini, namun karena dimasa pandemi ini saya tidak sekolah dan tidak ada kegiatan sama sekali, sehingga membuat saya gabut dan boring. 

Setelah saya pikir pikir menulis artikel bisa menghilangkan rasa gabut dan boring, alhasil saya membuka kembali list artikel yang saya mau post diblog ini. dan login keakun blogger saya dan menulis artikel yang sekarang kalian lihat ini. wait wait kok saya malah curhat ya wkwk, oke deh temen temen kita langsung saja keinti artikel ini.

Seperti yang kalian lihat dijudul, saya akan memberikan tutorial membuat tombol download dengan efek animasi keren. dengan efek animasi keren? apa itu efek animasi keren? biar kalian gak bingung dengan apa style tombol download yang akan kita buat ini, silahkan lihat demonya dibawah ini.


Bagaimana temen temen keren kan? tombol download ini akan bagus jika dipasang diblog sobat yang memakai themplate modern seperti template yang saya pakai ini. dengan efek garis yang berputar mengelilingi tombol dan juga efek hover yang bersinar ini akan menarik mata pengunjung blog kalian yang melihatnya. oke kita langsung saja ke cara pembuatannya saja ya, Cekidod.

TUTORIALNYA

Pertama masuk ke akun blogger kalian masing masing dan pergi kehalaman Template lalu edit html. Jika sudah copy semua kode css dbawah dan letakkan didalam atau sebelum kode </style>. 

.buttonnfs-anim1 .effeknfs1 a{background:#263638;position:relative;display:inline-block;padding:10px 20px;color:#03e9f4;font-size:16px;text-decoration:none;text-transform:uppercase;overflow:hidden;transition:.5s;margin-top:40px;letter-spacing:4px;border-radius:6px}.buttonnfs-anim1 a:hover{background:#03e9f4;color:#fff;border-radius:5px;box-shadow:0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 100px #03e9f4}.buttonnfs-anim1 a span.nfs1{position:absolute;display:block}.buttonnfs-anim1 a span.nfs1:nth-child(1){top:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#03e9f4);animation:btn-anim1 1s linear infinite}@keyframes btn-anim1{0%{left:-100%}100%,50%{left:100%}}.buttonnfs-anim1 a span.nfs1:nth-child(2){top:-100%;right:0;width:2px;height:100%;background:linear-gradient(180deg,transparent,#03e9f4);animation:btn-anim2 1s linear infinite;animation-delay:.25s}@keyframes nfsbutton-anim2{0%{top:-100%}100%,50%{top:100%}}.buttonnfs-anim1 a span:nth-child(3){bottom:0;right:-100%;width:100%;height:2px;background:linear-gradient(270deg,transparent,#03e9f4);animation:nfsbutton-anim3 1s linear infinite;animation-delay:.5s}@keyframes nfsbutton-anim3{0%{right:-100%}100%,50%{right:100%}}.buttonnfs-anim1 a span.nfs1:nth-child(4){bottom:-100%;left:0;width:2px;height:100%;background:linear-gradient(360deg,transparent,#03e9f4);animation:nfsbutton-anim4 1s linear infinite;animation-delay:.75s}@keyframes nfsbutton-anim4{0%{bottom:-100%}100%,50%{bottom:100%}}

Jangan lupa simpan template dan sekarang kita akan langsung menerapkan kedalam postingan atau halaman diblog kalian masing masing. Silahkan masuk kemenu postingan/halaman dan buatlah satu postingan/halaman, dan sekarang copy semua kode html dibawah, dan jangan lupa untuk mengubah mode compose ke mode tampilan HTML. 

<center><div class="buttonnfs-anim1">
  <div class="effeknfs1">
    <a href="link kalian disini">
      <span class="nfs1"></span>
      <span class="nfs1"></span>
      <span class="nfs1"></span>
      <span class="nfs1"></span>
      Submit
    </a>
  </div>
	</div></center>

Jika sudah, langkah terakhir adalah mempublikasikan postingan/halaman yang baru saja kalian buat tadi dan lihat hasilnya. jika tampilan tidak sama berarti ada kode yang bertabrakan atau salah penempatan, coba ulangi dan biasakan membaca postingan ini sampai habis agar tidak terjadi kesalahan.

Baiklah teman teman itu dia cara membuat tombol download dengan efek animasi keren, jangan lupa untuk membagikan postingan ini, karena pepatah mengatakan berbagi itu peduli. terimakasih sudah berkunjung dan sampai jumpa dinext artikel.

0 Comments