Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu đến các bạn một ứng dụng được viết bằng CSS giúp chúng ta có thể tiết kiệm được thời gian cũng như làm sinh động thêm những đối tượng trong HTML là Hover.css .Bây giờ hãy cùng nhau tìm hiểu nhé!
Việc đầu tiên là mình sẽ tạo file có cấu trúc thư mục như sau:
Tiếp đến chúng ta tải file hover-min.css mà mình để ở bên dưới:
Tải File hover-min.css
Các bản có thể tải bản đầy đủ và tìm hiểu thêm ở trang web : https://github.com/IanLunn/Hover
Sau đó tạo cấu trúc file HTML cho trang_chinh.html và tạo liên kết với trang hover_min.css. Do để tạo những nút button đẹp hơn thì mình sẽ sử dụng thêm Bootstrap4 cho trang HTML. Một lưu ý nhỏ là các bạn không cần phải tải file Bootrap4 về đâu vì mình sử dụng CDN link nên các bạn chỉ cần tạo file HTML giống bên dưới là có thể sử sụng được rồi. Các bạn xem đoạn code dưới đây để nắm rõ hơn nhé:
<!doctype html>
<html lang="en">
<head>
<title>Hover Min CSS</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="hover-min.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Khi ta đã chèn đường dẫn xong thì chúng ta chỉ cần tạo đối tượng HTML và gọi nó thông qua những class mà đã được viết sẵn trong file hover-min.css.
<div class="container">
<div class="row align-items-center">
<div class="col-sm-12 p-4">
<h3 class="alert alert-primary">Một số hiệu ứng Hover.Css</h3>
<button href="#" class="btn btn-light m-4 hvr-box-shadow-outset">Niềm Vui Lập Trình</button>
<button href="#" class="btn btn-light m-4 hvr-border-fade">Niềm Vui Lập Trình</button>
<button href="#" class="btn btn-light m-4 hvr-underline-from-left">Niềm Vui Lập Trình</button>
<button href="#" class="btn btn-light m-4 hvr-underline-from-center">Niềm Vui Lập Trình</button>
<button href="#" class="btn btn-light m-4 hvr-overline-from-center">Niềm Vui Lập Trình</button>
<button href="#" class="btn btn-light m-4 hvr-box-shadow-inset">Niềm Vui Lập Trình</button>
<button href="#" class="btn btn-light m-4 hvr-curl-top-left">Niềm Vui Lập Trình</button>
<button href="#" class="btn btn-light m-4 hvr-bubble-float-bottom">Niềm Vui Lập Trình</button>
<button href="#" class="btn btn-light m-4 hvr-bubble-right">Niềm Vui Lập Trình</button>
<button href="#" class="btn btn-light m-4 hvr-round-corners">Niềm Vui Lập Trình</button>
</div>
</div>
</div>
Khi thêm xong các bạn sẽ có những hiệu ứng giống mình ở video dưới đây:
Một lưu ý nhỏ là mình sẽ để đường dẫn tới trang demo của Hover.css: Hover.css để các bạn có thể lựa chọn nhiều hiệu ứng hơn cho trang web của mình. Video dưới đây mình sẽ hướng dẫn các bạn làm sao để xem và lấy những class của hiệu ứng bằng cách chọn kiểm tra nguồn trang sau đó dùng chuột nhấp vào thành phần mà mình muốn lấy và copy class đó về gắn vào thẻ HTML mà chúng ta muốn. Để hiểu rõ hơn các bạn xem video ở dưới nhé!
Các bạn cũng có thể sửa những hiệu ứng đó trong file hover-min.css nhưng theo mình nghĩ thì nên chỉ thay đổi màu phù hợp với trang web của bạn chứ không nên thay đổi các thuộc tính khác sẽ làm hỏng hoặc hiệu ứng hover đó sẽ không thể chạy được.
Mình gửi các bạn đường dẫn để tải về những file trong thư mục Hovermin.css để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code
Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm
Nếu bạn muốn tham khảo các hiệu ứng hover bootstrap thì truy cập đường dẫn bên dưới nha.
Hiệu Ứng Hover Ảnh Bootstrap 4
Nếu bạn muốn tham khảo các hiệu ứng hover dành cho component card thì truy cập đường dẫn bên dưới nha.
28 Hover Card CSS Javascript Cho Website
Nếu bạn muốn tham khảo các thư viện tạo hiệu ứng hover thì truy cập đường dẫn bên dưới nha.
Thư Viện Tạo Hover Effect
Tổng kết:
Qua đây mình mong muốn ứng dụng này sẽ giúp các bạn có thể làm trang web mình một cách sinh động hơn và nếu có thắc mắc gì cứ gủi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
