Cara Membuat Tombol di Blog dengan Efek Animasi Pelangi

KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini saya bagikan informasi mengenai Cara Membuat Tombol di Blog dengan Efek Animasi Pelangi, yang bisa kalian gunakan untuk membuat tombol seperti tombol demo, unduh, beli/pesan dan sebagainya. Hasil jadi pada tutorial kali ini bisa dilihat pada bagian akhir artikel.

Berikut adalah Cara Membuat Tombol di Blog dengan Efek Animasi Pelangi
1. Buka akun Blogger
2. Pilih Menu Tema >> Pilih Eit HTML
3. Copy kode CSS dibawah ini, kemudian letakkan (paste) diatas kode ]]></b:skin>

a.kurainbow-tombol {
    color: black;}
a {
  text-decoration:none;
  color:#FFF;
}
.kurainbow-tombol {
  width:calc(8vw + 5px);
  height:calc(2vw + 6px);
  background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  font-size:1vw;
  margin:auto;
  font-weight:bold;
}
.kurainbow-tombol:after {
  background-color:white;
  content:attr(alt);
  width:8vw;
  height:2vw;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.kurainbow-tombol:hover {
  animation:kuraslidebg 2s linear infinite;
}
@keyframes kuraslidebg{
  to {
    background-position:30vw;
  }
}

4. Simpan Template

Dari sini kalian sudah memiliki amunisi Tombol dengan Efek Pelangi, selanjutnya tinggal dimanakah kalian meletakkan tombolnya.

Copy kode HTML dibawah ini, kemudian letakkan ditempat yang kalian inginkan, misalnya seperti didalam postingan, di tata letak sidebar, maupun di footer. Silakan di explore.

<a href="/" class="kurainbow-tombol" alt="Demo"></a>
<a href="/" class="kurainbow-tombol" alt="Unduh"></a>
<a href="/" class="kurainbow-tombol" alt="Pesan"></a>

1. Ganti tanda slash (/) menjadi URL kalian
2. Ganti teks warna kuning dengan teks yang kalian inginkan

Note : 
Apabila kalian ingin memperbesar ukuran tombol dan teksnya, maka kalian bisa mengeksplor kode - kode CSS dibawah ini :

width:calc(8vw + 5px);
height:calc(2vw + 6px);
width:8vw;
height:2vw;
font-size:1vw;

Apabila ingin mengubah warna teks dan background, maka kalian bisa mengeksplor kode - kode CSS dibawah ini :

a.kurainbow-tombol2{color:black;
.kurainbow-tombol2:after{background-color:white;

DEMO : (Arahkan kursor ke Tombol untuk melihat animasi)

Itulah informasi mengenai "Cara Membuat Tombol di Blog dengan Efek Animasi Pelangi", selamat mencoba dan semoga bermanfaat. Goodluck!

Referensi : https://www.triksimple.com/2019/02/cara-membuat-button-demo-dengan-efek-rainbow.html