×

search by faronesia.com

Faronesia
Profesional and Specialist ReDesign Template blogger

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
  1. mantab mas.. izin share ...

    ReplyDelete
  2. Anonymous4:14 PM

    Design tombol download di blog ane :v

    ReplyDelete
    Replies
    1. Wkwk masa gan? Bisa pas gtu ya haha

      Delete
  3. Anonymous4:16 PM

    Dpt dri mana gan script css nya ?

    ReplyDelete
    Replies
    1. Ada source codenya gan di bawah postingan,, dapet dari yutuber hehe

      Delete
    2. Anonymous6:46 PM

      Dri DarkCode :v

      Delete

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 selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup
×

Faronesia

Kami senantiasa membantu memecahkan masalah seputar desain blog melalui request tutorial

Request tutorial