Cara membuat Tombol Tautan Warna Animasi Bercahaya - Halo semua, apa kabar, saya harap Kamu baik dan baik-baik saja. Jadi selamat datang kembali ke artikel lain masih membahas tentang tampilan dekorasi pada blogger. Nah, kali ini akan membahas Membuat Tombol Tautan Warna Animasi Bercahaya dengan refleksi khusunya pada platform Blogger.
Cara Membuat Tombol Tautan Warna Animasi Bercahaya
Hanya dengan menambahakan CSS pada tema Kamu maka Tombol Tautan Warna Animasi Bercahaya dapat kamu buat. Tentu dengan membuat tombol tersebut artikelmu akan terlihat lebih menarik, terlihat lebih kreatif, dan terlihat tidak membosankan karena terdapat berbagai variasi warna yang bisa digunakan.
Menambahkan CSS
- Buka halaman dasbor Blogger Kamu.
- Klik/tap pada bagian tema dan kemudian edit HTML .
- Silahkan cari kode tag </body>.
- Salin CSS yang diberikan di bawah ini dan tempel tepat di atas tag </body> .
- Jika sudah jangan lupa untuk menyimpan.
Sebelum mencoba kami sarankan untuk menyimpan atau mencadangkan tema. Jika terjadi kesalahan atau eror Kamu lebih mudah untuk mengembalikannya.
Format Penulisan:
<style type="text/css">
but{position:relative;display:inline-block;padding:10px 10px;margin:40px;color:#03e9f4;text-decoration:none;text-transform:uppercase;transition:0.5s;letter-spacing:4px;overflow:hidden}but:hover{background:#03e9f4;color:#050801;box-shadow:0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4;-webkit-box-reflect:below 1px linear-gradient(transparent,#0005)}but span{position:absolute;display:block}but span:nth-child(1){top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#03e9f4);animation:animate1 1.6s linear infinite}@keyframes animate1{0%{left:-100%}50%,100%{left:100%}}but span:nth-child(2){top:-100%;right:0;width:2px;height:100%;background:linear-gradient(180deg,transparent,#03e9f4);animation:animate2 1.6s linear infinite;animation-delay:0.40s}@keyframes animate2{0%{top:-100%}50%,100%{top:100%}}but span:nth-child(3){bottom:0;right:0;width:100%;height:2px;background:linear-gradient(270deg,transparent,#03e9f4);animation:animate3 1.6s linear infinite;animation-delay:0.80s}@keyframes animate3{0%{right:-100%}50%,100%{right:100%}}but span:nth-child(4){bottom:-100%;left:0;width:2px;height:100%;background:linear-gradient(360deg,transparent,#03e9f4);animation:animate4 1.6s linear infinite;animation-delay:1.20s}@keyframes animate4{0%{bottom:-100%}50%,100%{bottom:100%}}
</style>
Cara Penggunaan
Untuk menggunakannya kamu perlu menuliskan kode dibawah ini diartikel Kamu pada mode HTML. Terdapat 4 pilihan yang bisa kamu coba antara lain pink, oranye, biru dan hijau. <center>
<but onclick="window.open('#')" style="filter: hue-rotate(110deg)" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
Tombol Warna Dengan Animasi
</but>
</center>
<center>
<but onclick="window.open('#')" style="filter: hue-rotate(190deg)" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
Tombol Warna Dengan Animasi
</but>
</center>
<center>
<but onclick="window.open('#')" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
Tombol Warna Dengan Animasi
</but>
</center>
<center>
<but onclick="window.open('#')" style="filter: hue-rotate(270deg)" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
Tombol Warna Dengan Animasi
</but>
</center>
Perhatian
Ubah tanda # Sesuai link tujuan ketika tombol ditekan. Dan isi Deskripsi teks sesuai kebutuhanmu.
0Comments