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.
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
|