Efek Hover Keren Dengan CSS

EFEK HOVER KEREN DENGAN CSS SAJA.

Sobat pasti bosan ya liat saya posting tentang button terus. Hahaha tapi pokok pikiran saya ke tombol mulu. Mudah soalnya :v Dan karena biasanya saya share tentang tombol download. Kali ini bisa untuk dimana saja. Memangnya seperti apa efeknya? Lihat dibawah ini
*Kenapa saya dari dulu memakai warna Biru #31ace8 dan Hijau #21bbb8? Karena itu warna favorit saya.





Beauty Ninja Efek 1
atau
Beauty Ninja Efek 2

Tertarik? Pertama-tama, sobat harus menaruh kode dibawah ke atas ]]></b:skin>

.bntombol {
margin: .4em;
padding: 1em;
cursor: pointer;
background: #31ace8;
text-decoration: none;
font-family:arial;
color: #FFF;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
Lalu sobat pilih, mau yang efek 1 atau efek 2.
Taruh kode css dari efek yang sobat inginkan ke atas ]]></b:skin>
EFEK1 :
.bnkeluar {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bnkeluar:before {
  content: '';
  position: absolute;
  border: #21bbb8 solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.bnkeluar:hover:before, .bnkeluar:focus:before, .bnkeluar:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
 EFEK 2 :
.bndalam {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bndalam:before {
  pointer-events: none;
  content: '';
  position: absolute;
  border: #21bbb8 solid 4px;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.bndalam:hover:before, .bndalam:focus:before, .bndalam:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  opacity: 1;
}
Atau jika ingin keduanya tinggal copy semuanya ke atas ]]></b:skin>

PEMANGGILAN

Nah sekarang untuk pemanggilan tombolnya. Sobat tinggal menaruh kode dibawah
<a href="#" class="bntombol bnkeluar">Teks</a>
Ganti teks merah dengan bndalam jika sobat ingin merubah efek menjadi efek 2.

Merubah Warna

Mudah sekali sob, untuk mengganti warna border sobat tinggal cari #21bbb8 (di bnkeluar dan bndalam) dan ganti dengan warna yang sobat inginkan. Jika ingin merubah warna dalam sobat tinggal cari #31ace8 dan replace dengan warna kesukaan sobat.

Dan penjelasan diatas mengakhiri artikel saya ini. Jika ada yang tidak dimengerti sobat bisa bertanya di komentar.
Previous
Next Post »

No Active Link, Relevan ConversionConversion EmoticonEmoticon

Beauty Ninja | Author : Rishad Harisdias