×

search by faronesia.com

Faronesia WebDesign

Tutorial & Blogger Design by faronesia.com

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 ...

    ReplyDelete
  2. Anonymous4:14 PM

    Design tombol download di blog ane :v

    ReplyDelete
  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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Donasi ke faronesia.com

Hallo sobat Faronesia, Anda dapat memberikan suport kepada kami dengan cara memberikan donasi, yang mana nantinya donasi tersebut akan kami gunakan untuk pengembangan dan memperpanjang domain Faronesia.

NAMA : Hazira Azza Faroni
BANK BRI : 6642-01-030178-53-6
PULSA TSL : 081229706872
PULSA TREE : 0895366135403
Selesai