Share Tạo hiệu ứng hover cho button với thư viện Hover Buttons

[filiallion]

Language

Tiếng Việt

Các button mà các bạn thiết kế trong các form nhập liệu hay bất kỳ đâu cũng sẽ trở nên thu hút hơn nếu nó được thiết kế đi kèm với các hiệu ứng khi hover. Bài viết này tôi sẽ giới thiệu với các bạn thư viện Hover Buttons dùng để tạo hiệu ứng khi hover lên button.

Hover Buttons là một thư viện CSS nhỏ gọn và dễ sử dụng cho dù các bạn chỉ là người mới trong lĩnh vực thiết kế website. Tất cả chỉ là một vài khai báo CSS cho các button mà các bạn muốn áp dụng hiệu ứng hover. Hiện tại, thư viện Hover Buttons cung cấp nhiều hiệu ứng hover cho button và mỗi hiệu ứng đều được thiết kế chuyển động tinh tế, đẹp mắt.

Để sử dụng thư viện Hover Buttons, các bạn tải về tại địa chỉ https://github.com/Varin6/Hover-Buttons và tích hợp vào website với dòng mã lệnh HTML như sau:

<link href="path/to/hoverbuttons.css" rel="stylesheet">

Bây giờ, các bạn tạo hiệu ứng hover cho button như ví dụ sau:

<button type="button" class="hbtn hb-fill-top">Button</button>

Các bạn có thể tìm hiểu thêm các hiệu ứng hover khác của thư viện Hover Buttons tại địa chỉ https://varin6.github.io/Hover-Buttons.