HTML CSS Indonesia Web Desain

HOVERCSS : CSS3 Library dengan 40 Efek Hover

HOVERCSS : CSS3 Library dengan 40 Efek Hover November 27, 20143 Comments

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

tutorial desain web, belajar hover efect

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:

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

3 comments

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

    soalnya di tugasi sama dosen 😀

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *