Cara membuat hover pada button dengan efek gradasi

Faronesia.com - Halo sahabat faronesia, tombol atau button pada sebuah web maupun blog pada dasarnya memiliki fungsi yang sama, biasanya button tersebut digunakan oleh pemiliknya untuk mengalihkan halaman satu kehalaman yang lainnya. Namun, biasanya bentuk tombol tersebut masih terkesan kurang menarik. Nah, ini menjadi PR kita sebagai pemilik agar membangun blog menjadi lebih baik lagi dan memodifikasi bagian-bagian blog tersebut salah satunya tombol atau buttonnya.

Pada kesempatan kali ini admin akan membagikan sebuah tutorial singkat namun dijamin mudah dipraktekkan. Membuat button yang baik akan menciptakan rasa suka pengunjung terhadap blog anda karena blog yang anda kelola terlihat rapi dan sedap dipandang.

Lihat demo dibawah ini setelah itu klik tombol tersebut dan lihat animasi perubahannya, jika anda merasa cocok silahkan install pada blog anda, namun jika tidak suka silahkan ganti tutorial lainnya pada web ini
Seperti biasa, agar pemasangannya berjalan dengan lancar ada baiknya anda membackup template blog anda sebelum di modifikasi. Hal ini berguna untuk jaga-jaga jika anda salah menempelkan kode yang menyebabkan error pada template.

Cara membuat button dengan animasi gradasi pada blog


  • Masuk ke dashboard blog milik anda
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode ]]></b:skin> lalu tambahkan kode CSS dibawah ini tepat diatas kode tadi
.faronesiabtn{
  text-align: center;
}
.farobtn{
  border: none;
  margin: 20px;
  padding: 24px;
  width: 220px;
  font-family: "montserrat",sans-serif;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  background-size: 200%;
  transition: 0.6s;
}
.farobtn1{
  background-image: linear-gradient(to left,#FFC312,#EE5A24,#FFC312);
}
.farobtn:hover{
  background-position: right;
}
  • Setelah itu simpan template
  • Selanjutnya, pasang kode tombol HTML berikut ini sesuai keinginan anda (didalam postingan, halaman statis, widget)
<div class="faronesiabtn">
<button class="farobtn farobtn1">faronesia</button>
</div>
  • Ganti tulisan yang berwarna kuning sesuai keinginan anda
  • Selesai, lalu terapkan/simpan
  • NOTE: silahkan modifikasi sendiri sesuai keinginan anda jika kode diatas kurang pas dihati anda
Demikianlah mengenai Cara membuat button dengan animasi gradasi pada blog semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel