Cara Membuat Tombol di Blog dengan Efek Animasi Pelangi

Pilihan Editor :

Cara Membuat Tombol di Blog dengan Efek Animasi Pelangi
Penulis Kurazone
1
Modus malam
AAA
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

1 komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar TIDAK di moderasi.