Fullscreen mode
Normal mode

Cara membuat Tombol Dengan Efek Hover yang Mengagumkan

Faronesia.com - Halo blogger mendesain beberapa tombol pada sebuah blog ternyata sangat diperlukan juga loh. Hal ini menyangkut reaksi para pengunjung dalam memberikan sebuah penilaian singkat dengan sekilas pandang. Dan anda jangan sekali-sekali meremehkan hal sekecil apapun sebab dengan anda lupa mendesain tombol saja maka tampilan sebuah blog terasa kurang sempurna dimata para pembaca.

Nah kali ini admin faronesia akan memberikan tutorial membuat tombol Dengan Efek Hover yang Mengagumkan hanya menggunakan CSS dan HTML saja. Pada tutorial ini seperti biasa, anda hanya mengcopy lalu menempelkan pada template blog yang anda inginkan.

Tetapi, sebelum melakukan tutorial kali ini admin harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.

Seperti apa sih penampang tombolnya? Silahkan anda klik dibawah ini
Cara membuat Tombol Dengan Efek Hover yang Mengagumkan

  • Masuk ke dashboard blog 
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML Cari kode ]]></b:skin> lalu tambahkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>
.btn{
  width: 200px;
  height: 60px;
  background: none;
  border: 4px solid;
  color: #3498db;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 16px;
  position: relative;
}
.btn::before,.btn::after{
  content: "";
  position: absolute;
  width: 14px;
  height: 4px;
  background: #fff;
  transform: skewX(50deg);
  transition: .4s linear;
}
.btn::before{
  top: -4px;
  left: 10%;
}
.btn::after{
  bottom: -4px;
  right: 10%;
}
.btn:hover::before{
  left: 80%;
}
.btn:hover::after{
  right: 80%;
}
  • Selanjutnya, simpan template / terapkan
  • Lalu letakkan kode html dibawah ini terserah dimana yang anda inginkan seperti (postingan, halaman, widget dll)
<button class="btn">Hover Me</button>
  • Selesai, mudah sekali bukan?
Demikianlah mengenai Cara membuat Tombol Dengan Efek Hover yang Mengagumkan 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.

Source code: darkcode1.blogspot.com
Buka komentar
Tutup komentar

7 komentar dari postingan "Cara membuat Tombol Dengan Efek Hover yang Mengagumkan"

  1. mantab mas.. izin share ...

    BalasHapus
  2. Design tombol download di blog ane :v

    BalasHapus
    Balasan
    1. Wkwk masa gan? Bisa pas gtu ya haha

      Hapus
  3. Dpt dri mana gan script css nya ?

    BalasHapus
    Balasan
    1. Ada source codenya gan di bawah postingan,, dapet dari yutuber hehe

      Hapus
    2. Dri DarkCode :v

      Hapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel