Beragam efek hover yang menarik

Beragam efek hover yang menarik

  21 February    Andika

---

Efek hover adalah salah satu efek yang selalu membantu kita untuk menyajikan sebuah konten terlihat berbeda dan tentu saja jauh lebih menarik.

Efek hover yang akan saya bagikan kali ini bisa menjadi pilihan buat kamu yang ingin menyajikan konten yang sedikit berbeda dengan blog lainnya. Dan yang pasti, element utamanya hanya lah CSS murni tanpa mengandalkan Jquery maupun Java Script.

Pada demo di bawah ini, silahkan arahkan kursor ke setiap demo yang tersedia untuk melihat efeknya.

Langsung saja,

Pada selector CSS yang akan saya bagikan ini saya menggunakan Selector "hovernya", silahkan ganti sesuai keinginan. Namun ingat, selektor ini akan menjadi tiang utama dari efek yang nanti akan di tampilkannya.

.hovernya {
  display:inline-block;
  border-width:50px;
  border-color:rgba(0,0,0,0);
  border-radius:100%;
  box-sizing:border-box;
  transition:0.9s ease;
}

.hovernya:hover {
  cursor:pointer;
  border-width:0;
  border-color:rgba(0,128,128,0.5);
}

.hover0 {
  border-style:solid;
}

.hover1 {
  border-style:double;
}

.hover2 {
  border-style:dotted;
}

.hover3 {
  border:50px solid rgba(0,128,128,0.5);
}

.hover3:hover {
  border:1px solid rgba(0,128,128,0.5);
}

.hover4 {
  border:50px dotted rgba(0,128,128,0.5);
}

.hover4:hover {
  border:1px dashed rgba(0,128,128,0.5);
}

.hover5 {
  border:50px dotted rgba(0,128,128,0.5);
}

.hover5:hover {
  border:1px dotted rgba(0,128,128,0.5);
}

.hover6 {
  border:50px double rgba(0,128,128,0.5);
}

.hover6:hover {
  border:1px double rgba(0,128,128,0.5);
}

.hover7 {
  border:50px solid rgba(0,128,128,0.5);
}

.hover7:hover {
  border:1px solid rgba(0,128,128,0.5);
}

.hover8 {
  border:50px dashed rgba(0,128,128,0.5);
}

.hover8:hover {
  border:1px dashed rgba(0,128,128,0.5);
}

.hover9 {
  border:50px dotted rgba(0,128,128,0.5);
}

.hover9:hover {
  border:1px dotted rgba(0,128,128,0.5);
}

.hover7,
.hover8,
.hover9 {
  border-radius:0;
}

Untuk menampilkannya ke dalam element yang ingin kamu beri efek, berikut contoh penerapannya,

<div class="hovernya hover0"></div>
<div class="hovernya hover1"></div>
<div class="hovernya hover2"></div>
<div class="hovernya hover3"></div>
<div class="hovernya hover4"></div>
<div class="hovernya hover5"></div>
<div class="hovernya hover6"></div>
<div class="hovernya hover7"></div>
<div class="hovernya hover8"></div>
<div class="hovernya hover9"></div>

Keterangan,

<div class="selector efeknya"></div>

Slamat mencoba!!