Tạo hiệu ứng Hover bằng CSS3 đơn giản với Hover.css

21/03/2014

Hover.css là một tập hợp những hiệu ứng hover bằng CSS3 được viết sẵn, và bạn có thể dễ dàng áp dụng cho những phần tử trong website như hình ảnh, nút bấm, chữ, logo… Chỉ với việc chèn vào các class tương ứng.

hover-css3-collection

Xem Demo | Download

Có tất cả 40 hiệu ứng để cho các bạn lựa chọn , bao gồm 2D transforms, border transitions, shadow và glow transitions, speech bubbles, và page curls.

Cách sử dụng :

– Để bắt đầu, các bạn download hover.css về máy.
– Sau đó chèn hover.css vào trong trang web, các bạn chèn nó vào trong thẻ <head>

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

– Kế tiếp là chèn các class tương ứng với các hiệu ứng hover. Giả sử chúng ta đã có sẵn một button  như sau :

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

Và để có hiệu ứng floats, chúng ta sẽ chèn thêm class như sau :

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

Để hiểu rõ từng hiệu ứng sẽ như thế nào, các bạn có thể xem demo để biết, và sau đây là tổng hợp các hiệu ứng cũng như class tương ứng giúp các bạn áp dụng vào cho các phần tử trên trang web của mình.

2D Transforms
Hiệu ứng Tên Class
Grow grow
Shrink shrink
Pulse pulse
Pulse Grow pulse-grow
Pulse Shrink pulse-shrink
Push push
Pop pop
Rotate rotate
Grow Rotate grow-rotate
Float float
Sink sink
Hover hover
Hang hang
Skew skew
Skew Forward skew-forward
Skew Backward skew-backward
Wobble Horizontal wobble-horizontal
Wobble Vertical wobble-vertical
Wobble To Bottom Right wobble-to-bottom-right
Wobble To Top Right wobble-to-top-right
Wobble Top wobble-top
Wobble Bottom wobble-bottom
Wobble Skew wobble-skew
Buzz buzz
Buzz Out buzz-out
Border Transitions
Hiệu ứng Tên Class
Border Fade border-fade
Hollow hollow
Trim trim
Outline Outward outline-outward
Outline Inward outline-inward
Round Corners round-corners
Shadow and Glow Transitions
Hiệu ứng Tên Class
Glow glow
Box Shadow Outset box-shadow-outset
Box Shadow Inset box-shadow-inset
Float Shadow float-shadow
Hover Shadow hover-shadow
Shadow Radial shadow-radial
Speech Bubbles
Hiệu ứng Tên Class
Bubble Top bubble-top
Bubble Right bubble-right
Bubble Bottom bubble-bottom
Bubble Left bubble-left
Bubble Float Top bubble-float-top
Bubble Float Right bubble-float-right
Bubble Float Bottom bubble-float-bottom
Bubble Float Left bubble-float-left
Curls
Hiệu ứng Tên Class
Curl Top Left curl-top-left
Curl Top Right curl-top-right
Curl Bottom Right curl-bottom-right
Curl Bottom Left curl-bottom-left

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !