Cara Mudah Buat Tombol Button di Blog dengan Efek Animasi Keren

Cara Mudah Membuat Tombol dengan Efek Animasi di Blog

Halo sobat blogger. Apakah kalian sedang ingin membuat tombol button download, submit atau sejenisnya dengan efek animasi yang menarik? mungkin cara berikut bisa kalian coba. Berikut ini tim automabar akan berbagi tutorial mudah Membuat tombol button dengan efek animasi pelangi dengan code css, hanya dengan dua langkah saja kalian sudah bisa menikmati efek animasi keren pada tombol button mu. Silahkan simak caranya berikut ini.

Berikut adalah cara membuat Tombol Button di blog dengen Efek Animasi Pelangi

1. Buka akun Blogger

2. Pilih Menu TEMA > Pilih Edit HTML

3. Copy kode CSS berikut ini dan pastekan 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
Copy kode HTML berikut ini, lalu letakan ditempat yang kamu inginkan. Misal: seperti di dalam postingan mu.

<a href="https://automabar.blogspot.com" class="kurainbow-tombol" alt="Demo"></a>
<a href="https://automabar.blogspot.com" class="kurainbow-tombol" alt="Unduh"></a>
<a href="https://automabar.blogspot.com" class="kurainbow-tombol" alt="Pesan"></a>

1. Ganti link https://automabar.blogspot.com dengan URL blog mu
2. Ganti teks warna biru tersebut dengan teks yang kamu inginkan

Tambahan: Kalian juga bisa memperbesar ukuran tombol button dan teks tersebut, dengan mengedit kode CSS berikut ini.
caranya silahkan Ctrl+F di Edit HTML dan cari kode berikut:

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

warna teks dan backgroundnya juga bisa kalian sesuaikan dengan selera. silahkan cari code css berikut ini:

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

Maka akan muncul tampilan seperti berikut ini:

Arahkan tombol ke kursor untuk melihat animasi:

Automabar

Hello! We are AutoMabar Team. we're ready to share all about tutorial what you need. Especially about Blogging, Game and Application

Share this post