HOVERCSS : CSS3 Library dengan 40 Efek Hover

HOVERCSS : CSS3 Library dengan 40 Efek Hover

resellerhosting murah, ceap reseller hosting

Cara Download dan Memulai HOVERCSS Jika Anda senang membuat tombol yang memberikan efek saat kursor mouse lewat, tutorial berikut ini bisa membantu m

14 Cara Jitu Mencegah situs WordPress Anda dari serangan Hacker
Download Gratis Modul Pengiriman JNE untuk OpenCart
Gratis Download Web Hosting Template

Cara Download dan Memulai HOVERCSS

Jika Anda senang membuat tombol yang memberikan efek saat kursor mouse lewat, tutorial berikut ini bisa membantu mempermudah anda dalam mendisain web dan menambahkan beberapa efek hover pada button (tombol) di Website Anda.

HOVERCSS adalah CSS3 Library yang telah menyediakan lebih dari 40 efek hover yang bisa Anda gunakan di website Anda. Penggunaannya sangat mudah. Silahkan download HOVERCSS melalui github kemudian upload ke web Anda. Kemudian tambahkan hover css library ke website Anda dengan cara:

<head>
...
...
<link href="css/hover.css" rel="stylesheet" media="all">
...
...
</head>

Cara Memberi Efek HOVERCSS pada Elemen Web Anda

untuk memberi efek yang anda inginkan pada elemen web Anda, cukup dengan cara menambahkan nama class sesuai dengan nama efeknya. Misal jika Anda mempunyai tombol (button) dengan kode HTML sebagai berikut :

<a href="#" class="button">Tombol</a>

untuk menambahkan efek FLOAT pada tombol tersebut, cukup dengan menambahkan nama class float sebagai berikut :

<a href="#" class="button float">Tombol</a>

Nama Class yang bisa Anda gunakan adalah :
[row]
[col span=”1/4″]

  • grow
  • shrink
  • pulse
  • pulse-grow
  • pulse-shrink
  • push

[/col]
[col span=”1/4″]

  • pop
  • rotate
  • grow-rotate
  • float
  • sink
  • hover

[/col]
[col span=”1/4″]

  • hang
  • skew
  • skew-forward
  • skew-backward
  • wobble-horizontal
  • wobble-vertical

[/col]
[col span=”1/4″]

  • wobble-to-bottom-right
  • wobble-to-top-right
  • wobble-top
  • wobble-bottom
  • wobble-skew
  • buzz
  • buzz-out

[/col]
[/row]

Untuk efek lain, silahkan buka CSS.. anda akan menemukan lebih dari 40 efek di file tersebut

DEMO
DOWNLOAD

Incoming search terms:

Loading...
loading...

COMMENTS

WORDPRESS: 3
  • comment-avatar

    […] often to use button or another HTML element with hover effect, in this tutorial we will describe how to make hover effect easily with HOVERCSS Library. You can add hover effect to your HTML element just with add class name in your […]

  • comment-avatar

    hai there 🙂
    saya mau bertanya cara menambahkan effect tersebut pada tombol web caranya bagaimana ya ?
    saya pakai php nih

    soalnya di tugasi sama dosen 😀

    • comment-avatar

      itu kan di tutorial sudah dijelaskan tahapannya secara detail mas, bahkan kita sudah kasih demo juga.. yang gak jelas dimana?

  • DISQUS: 0