Keren ! Tombol Download Ini Bisa Bikin Pengunjung Salah Fokus
Tombol download merupakan elemen html yang dibuat sedemikian rupa agar memiliki tampilan yang berbeda antara penggunaan link keluar biasa dengan link keluar yang mengarahkan ke halaman download.
Tombol download yang admin bagikan kali ini menggunakan tampilan unik yang menggoda dengan animasi yang sepenuhnya hanya menggunakan kode CSS murni sehingga tidak memberatkan rendering blog dan bisa berjalan di semua browser modern.
Warna default tombol download menggunakan dominasi warna biru namun masih bisa disesuaikan dengan mudah melalui pengaturan kode CSS. Pengaturan default lainnya bisa dirubah untuk menyesesuaikan dengan tampilan template blog atau website yang kamu gunakan.
Dalam jaringan komputer, download berarti menerima data dari sistem jarak jauh, biasanya server seperti server web, server FTP, server email, atau sistem serupa lainnya. Ini kontras dengan mengunggah, di mana data dikirim ke server jauh. Unduhan adalah file yang ditawarkan untuk diunduh atau yang telah diunduh, atau proses menerima file semacam itu.
Mengunduh (DOWNLOAD) umumnya mentransfer seluruh file untuk penyimpanan lokal dan penggunaan di lain waktu, berbeda dengan streaming, di mana data digunakan segera, saat transmisi masih berlangsung, dan yang mungkin tidak disimpan dalam jangka panjang. Situs web yang menawarkan media streaming atau media yang ditampilkan dalam browser, seperti YouTube, semakin membatasi kemampuan pengguna untuk menyimpan materi ini ke komputer mereka setelah diterima.
Mengunduh tidak sama dengan transfer data; memindahkan atau menyalin data antara dua perangkat penyimpanan akan menjadi transfer data, tetapi menerima data dari Internet atau BBS sedang mengunduh.
Sumber : Wikipedia
Tombol Download 1
Tombol download yang pertama ini berbentuk kotak dengan ujungnya yang agak round, memiliki animasi shining dari kiri ke kanan. Tombol download ini cocok digunakan untuk blog yang memiliki niche download games, aplikasi, software dan lain sebagainya. Sebagai contoh seperti yang terlihat dibawah ini.
Oke, mas bro dan mba sis buat yang tertarik dengan tombol download ini silakan disimak tutorial untuk cara pemasangannya di bawah ini.
- Login ke blogspot untuk masuk ke dashboard blog.
- Pilih Tata Letak kemudian pilih Tambahkan Gadget.
- Pilih HTML/Javascript
- Taruh kode pada kotak widget, setelah selesai tekan tombol Save
<div class="cfl-shineBtn"><div id="bluebtn0" class="shineBtn">
<button class="blue-btn">
<i class="fa fa-download" aria-hidden="true"></i> Download
</button>
</div></div>
<style>
.blue-btn{
background: #03a9f5;
color: #fff;
overflow:hidden;
cursor:pointer;
position:relative;
text-decoration:none;
outline:0;
margin:1px 5px;
padding: 12px 22px;
border-radius: 8px;
border: 1px solid #3784b7;
text-align: center;
font-size:16px;
font-weight:600;
-webkit-transform:perspective(1px) translateZ(0);
transform:perspective(1px) translateZ(0);
background-image:linear-gradient(110deg,transparent 75%,rgba(255,255,255,0.1) 75%,rgba(255,255,255,0.1) 81.5%,rgba(255,255,255,0.2) 81.5%,rgba(255,255,255,0.2));
}
.blue-btn:hover::before,.blue-btn:focus::before,.blue-btn:active::before{
background-color:#8fc800;
border-radius:8px;
box-shadow:inset 0px 1px 0px 0px #cae5f7;
background-image:linear-gradient(110deg,transparent 75%,rgba(255,255,255,0.1) 75%,rgba(255,255,255,0.1) 81.5%,rgba(255,255,255,0.2) 81.5%,rgba(255,255,255,0.2));
-webkit-transform:scaleX(1);
transform:scaleX(1);
-webkit-transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);
transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);
}
.blue-btn:hover,.blue-btn:focus,.blue-btn:active{color:#000;border:1px solid #67a93e;border-radius:8px;}
.blue-btn::before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
.cfl-shineBtn{
clear:both;
position:relative;
text-align:center;
overflow:hidden;
display:inline-block;
cursor:pointer;
}
.shineBtn:hover:before{
animation-iteration-count: 0;
}
.shineBtn:before {
position:absolute;
top:0;
left:-20px;
z-index:9999;
display:block;
content:'';
width:20px;
height:100%;
background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);
background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);
-webkit-transform:skewX(-20deg);
transform:skewX(-20deg);
animation:shineBtnAnim 3s ease;
animation-iteration-count: infinite;
}
@keyframes shineBtnAnim {
0%,50%{left:-20px;}
100%{left:100%;}
}
</style>
KETERANGANCara penggunaan cukup mudah tinggal copy paste kode di atas dan taruh kedalam artikel dalam mode Edit HTML, apabila ingin dipisah silakan taruh kode CSS (<style) ke dalam kode HTML template, selanjutnya untuk penggunaan cukup gunakan kode HTML elemen tombol di dalam artikel.
Tombol Download 2
Tombol download yang pertama ini berbentuk elips dengan ujungnya yang seperti kapsul, memiliki animasi efek bergerak dari 2 arah. Tombol download ini cocok digunakan untuk blog yang memiliki niche download games, aplikasi, software, blogger, sharing dan lain sebagainya. Sebagai contoh seperti yang terlihat dibawah ini.
Oke, mas bro dan mba sis buat yang tertarik dengan tombol download ini silakan disimak tutorial untuk cara pemasangannya di bawah ini.
- Login ke blogspot untuk masuk ke dashboard blog.
- Pilih Tata Letak kemudian pilih Tambahkan Gadget.
- Pilih HTML/Javascript
- Taruh kode pada kotak widget, setelah selesai tekan tombol Save
<div class="cflBtn"><a class="blue-button"><i class="fa fa-download" aria-hidden="true"></i> Download</a></div>
<style>
/* Main Color Setting */
:root {
--mainCFLBG: #007dc1;
--cflRainbow: linear-gradient(90deg,rgba(255, 0, 0, 1) 0%,rgba(255, 154, 0, 1) 10%,rgba(208, 222, 33, 1) 20%,rgba(79, 220, 74, 1) 30%,rgba(63, 218, 216, 1) 40%,rgba(47, 201, 226, 1) 50%,rgba(28, 127, 238, 1) 60%,rgba(95, 21, 242, 1) 70%,rgba(186, 12, 248, 1) 80%,rgba(251, 7, 217, 1) 90%,rgba(255, 0, 0, 1) 100%);
--cflDecorative: linear-gradient(110deg,transparent 75%,rgba(255,255,255,0.1) 75%,rgba(255,255,255,0.1) 81.5%,rgba(255,255,255,0.2) 81.5%,rgba(255,255,255,0.2));
}
/* Button Style Setting */
.blue-button{
color:#fff;
display:inline-block;
overflow:hidden;
cursor:pointer;
outline:0;
line-height:0;
font-size:16px;
font-weight:600;
margin:0;
padding:12px 22px;
border-radius:20px;
border:1px solid #124d77;
text-align: center;
text-shadow:0px 1px 0px #154682;
background-color:var(--mainCFLBG);
background-image:var(--cflDecorative);
text-decoration:none;
box-sizing:border-box;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-transform:perspective(1px) translateZ(0);
transform:perspective(1px) translateZ(0);
transition:background .5s linear;
}
.cflBtn {position:relative;display:inline-block;padding:0;margin:0;}
.cflBtn .blue-button:before,.cflBtn .blue-button:after{content:"";position:absolute;top:50%;width:5px;height:50%;transform:translateY(-50%);background-color:rgba(255,255,255,.75);z-index:999999999;}
/* Button Hover Setting */
.cflBtn:hover > .blue-button {
color:#fff;
background:var(--cflRainbow);
background-size: 200% 100%;
-webkit-animation: Gradient 1s linear infinite;
-moz-animation: Gradient 1s linear infinite;
animation: Gradient 1s linear infinite;
}
/* Button Animation Setting */
.cflBtn .blue-button:before{left:-5%;animation:light-left 3s infinite alternate linear;}
.cflBtn .blue-button:after{right:-5%;animation:light-right 3s infinite alternate linear;}
.cflBtn:hover > .blue-button:before,.cflBtn:hover > .blue-button:after{animation:stop;}
@keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}100%{left:105%;opacity:0}}
@keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}100%{right:105%;opacity:0}}
@-webkit-keyframes Gradient{0%{background-position:100% 50%}50%{background-position:0% 50%}100%{background-position:-100% 50%}}
@-moz-keyframes Gradient{0%{background-position:100% 50%}50%{background-position:0% 50%}100%{background-position:-100% 50%}}
@keyframes Gradient{0%{background-position:100% 50%}50%{background-position:0% 50%}100%{background-position:-100% 50%}}
</style>
KETERANGANCara penggunaan cukup hampir sama dengan tombol yang pertama tinggal copy paste kode di atas dan taruh kedalam artikel dalam mode Edit HTML, apabila ingin dipisah silakan taruh kode CSS (<style) ke dalam kode HTML template, selanjutnya untuk penggunaan cukup gunakan kode HTML elemen tombol di dalam artikel.
blog, blogger, blogspot, cara, howto, bikin, pasang, buat, tombol, button, download, unduh, html, css, mudah, gampang, kode, code, simple
Cara mudah bikin tombol download HTML CSS, Kode CSS untuk tombol download super keren dan unik, HTML bikin tombol download di blog, Cara menaruh tombol download di postingan artikel blog, Kumpulan tombol download pilihan terbaik, Button HTML download for blogger, How-to make HTML download button with animation effect, Custom download button only using CSS, Button download for begginner, Belajar kode HTML membuat tombol di halaman blogspot
About CodeFlare
![[+] Codeflare Backlink Editor To Create Anchor Text With Keyword](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXC9KPkhkaNh3A4Wy-XX1I2kSj2rB2qXjmLIQktDvCxyPdUINtltp2Ih9iLVpEyb-0tYBaLGQb52bIszHmT9_etJT-awZy9IcxsBPfvQHJs7K7BI6bxz0rgcILCFxAhuL0CNbqYaS9DvELwWieNdZscUv-_8lhmqeMjcWmIRH3X38nOkbgkYK6dfySxg/s72-c/backlink%20editor.jpg)
No comments