Thủ Thuật tạo hiệu ứng Hover bằng CSS3 đơn giản với Hover.css

Danh mục: CSS
 

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.

 

css3, hover effect, hiệu ứng Hover, Hover tips, code css3

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

 



BÀI VIẾT KHÁC
CODE GỢI Ý CHO BẠN
BÌNH LUẬN

BẢN QUYỀN ®
MANGUON.COM đã đăng kí quyền tác giả: AR1682/GP-STTTP
Mọi chia sẻ nội dung thuộc tác quyền của MANGUON.COM phải ghi rõ "Nguồn MANGUON.COM"