Thang độ xám css di chuột

Trong bài viết này, chúng tôi xin hướng dẫn bạn cách thang độ xám và tô màu lại hình ảnh khi có hiệu ứng hover bằng cách sử dụng CSS

giải pháp nhanh chóng

img {
  filter: grayscale(100%);
}

img:hover {
  filter: grayscale(0%);
}

Lớp giả :hover CSS được kích hoạt khi người dùng di chuột qua phần tử img bằng con trỏ,  thay đổi kiểu img thành kiểu được chỉ định trong dấu ngoặc nhọn

Ví dụ thực tế

Trong ví dụ này, chúng tôi đặt bộ lọc thang độ xám trên phần tử img thành 100% ngay từ đầu và tắt bộ lọc này trên hiệu ứng di chuột bằng cách sử dụng CSS pseudo-class

Bài viết hôm nay chúng ta hãy cùng nhau đi tìm hiểu những hiệu ứng đẹp cho đường dẫn được xây dựng bằng HTML, CSS, Javascript và sử dụng phổ biến trong năm 2022 nhé

Các Ví Dụ Về Hiệu Ứng Link CSS

Hiệu ứng Hover Link CSS

Kết quả bạn xem bên dưới nhé

Xem Bút liên kết "Đọc thêm" của Stas Melnikov (@melnik909) trên CodePen

Nguồn

Tạo Hiệu Ứng Chuyển Động Gradient Gạch chân Cho Đường Dẫn

Kết quả bạn xem bên dưới nhé

Xem phần Gạch dưới chuyển màu hoạt hình bằng bút để biết Trạng thái di chuột liên kết của George W. Công viên (@GeorgePark) trên CodePen

Nguồn

Thay Đổi Màu Viền Khi Hover Đường Dẫn Bằng CSS3

Kết quả bạn xem bên dưới nhé

Xem Ý tưởng liên kết Pen Cool CSS3 của Brenden Palmer (@brenden) trên CodePen

Nguồn

Hiệu ứng Hover Wave Cho Link CSS

Kết quả bạn xem bên dưới nhé

Xem Pen Link Effectz - Squiggle của Geoff Graham (@geoffgraham) trên CodePen

Nguồn

Tạo Hiệu Ứng Hover Cho Đường Dẫn Bằng HTML5 CSS3

Kết quả bạn xem bên dưới nhé

Xem hiệu ứng Pen Link của Tobias Reich (@electerious) trên CodePen

Nguồn

Thay Đổi Màu Nền Khi Hover Link CSS

Kết quả bạn xem bên dưới nhé

Xem Bút #0001 • Liên kết với nền gradient khi di chuột của Giulia Malaroda (@giuliamalaroda) trên CodePen

Nguồn

Thiết Lập Style cho Đường Dẫn Bằng CSS

Kết quả bạn xem bên dưới nhé

Xem Pen Single Element Link Styling của Alex Bergin (@abergin) trên CodePen

Nguồn

Tổng Hợp Ứng Chuyển Động Cho Đường Dẫn

Kết quả bạn xem bên dưới nhé

Xem hình động liên kết Pen Subtle. bởi Josip Psihistal (@butsuri) trên CodePen

Nguồn

Tạo Hiệu Ứng Liên kết Hover CSS3

Kết quả bạn xem bên dưới nhé

Xem Ý tưởng mũi tên di chuột liên kết bút của Gabrielle Wee 🧧 (@gabriellewee) trên CodePen

Nguồn

Thiết Lập CSS Gạch Dưới Cho Đường Dẫn

Kết quả bạn xem bên dưới nhé

Xem Hiệu ứng nhấp chuột/làm nổi bật liên kết bút của Emily Hayman (@eehayman) trên CodePen

Nguồn

Cách Tạo Hiệu Ứng Hover Nav Link CSS

Kết quả bạn xem bên dưới nhé

Xem Hiệu ứng đường di chuột trong menu bút của Mehmet Burak Erman (@mburakerman) trên CodePen

Nguồn

Hiệu ứng Hover Text Underline CSS3

Kết quả bạn xem bên dưới nhé

Xem các hiệu ứng di chuột gạch dưới Văn bản bằng bút của Misha Heesakkers (@MishaHahaha) trên CodePen

Nguồn

Tạo Hiệu Ứng Hover Cho Đường Dẫn Bằng Mo. js

Kết quả bạn xem bên dưới nhé

Xem Hiệu ứng di chuột liên kết bút w/ mo. js của Mike Quinn (@mprquinn) trên CodePen

Nguồn

Thiết Kế Hiệu Ứng CSS Text Hover

Kết quả bạn xem bên dưới nhé

Xem các hiệu ứng liên kết Pen css, bởi sam van der Heijden của Sam van der Heijden (@samvdh) trên CodePen

Nguồn

Tạo CSS liên kết Hover 3D

Kết quả bạn xem bên dưới nhé

Xem Pen Link hover của hafiz fattah (@hafizfattah) trên CodePen

Nguồn

Hiệu Ứng Link Click CSS3

Kết quả bạn xem bên dưới nhé

Xem Hoạt hình canvas khi nhấp chuột vào mỏ neo của Nick Sheffield (@nicksheffield) trên CodePen

Nguồn

Cách Thiết Kế Nền Liên kết CSS Hover

Kết quả bạn xem bên dưới nhé

Xem Liên kết cuộn bút của Hakim El Hattab (@hakimel) trên CodePen

Nguồn

Cách Tạo Hiệu Ứng Chuyển Động Biểu Tượng Cho Đường Dẫn

Kết quả bạn xem bên dưới nhé

Xem biểu tượng Pen Animated liên kết bên ngoài của Krz Szzz (@ccrch) trên CodePen

Nguồn

Cách tạo CSS3 Hover Link Transition

Kết quả bạn xem bên dưới nhé

Xem trọng lượng phông chữ Pen Animated khi di chuột của Jesper Strange Klitgaard Christiansen (@jesperkc) trên CodePen

Nguồn

Tạo Hiệu Ứng Hover Cho Menu Link CSS

Kết quả bạn xem bên dưới nhé

Xem chuyển động của dòng Pen Nice di chuột bởi Bruno Almeida (@brunob182) trên CodePen

Nguồn

Hiệu Ứng Hover Cho Navbar Link

Kết quả bạn xem bên dưới nhé

Xem hiệu ứng Pen Menu hover của Jason Hee (@jasonheecs) trên CodePen

Nguồn

Tổng Hợp Các CSS Link Hover Text

Kết quả bạn xem bên dưới nhé

Xem Thử nghiệm kiểu liên kết bút của Lindsey (@cssgirl) trên CodePen

Nguồn

Màu văn bản hiệu ứng Hover

Kết quả bạn xem bên dưới nhé

Xem hiệu ứng Pen Hover từ trái sang phải trên màu văn bản của Boris (@babouz44) trên CodePen

Nguồn

Các Hiệu Ứng Hover Link CSS Border

Kết quả bạn xem bên dưới nhé

Xem hiệu ứng Pen Link hover của Arnaud Balland (@ArnaudBalland) trên CodePen

Nguồn

Các Hiệu Ứng Hover Link Bằng HTML5 CSS3

Kết quả bạn xem bên dưới nhé

Xem Pen Link Fill on Hover của Katherine Kato (@kathykato) trên CodePen

Nguồn

Hiệu Ứng Hover Arrow Link

Kết quả bạn xem bên dưới nhé

Xem liên kết Mũi tên Bút. hiệu ứng di chuột của Nicolas Udy (@udyux) trên CodePen

Nguồn

Hiệu Ứng Hover Arrow Link

Kết quả bạn xem bên dưới nhé

Xem liên kết Mũi tên Bút. hiệu ứng di chuột của Nicolas Udy (@udyux) trên CodePen

Nguồn

Liên kết hoạt hình di chuột

Kết quả bạn xem bên dưới nhé

Xem hoạt hình di chuột của Pen Link của Aaron Iker (@aaroniker) trên CodePen

Nguồn

Nút Vẽ trên Hover Mixin

Kết quả bạn xem bên dưới nhé

Xem Pen Button Draw on Hover Mixin của Thomas Vaeth (@thomasvaeth) trên CodePen

Nguồn

Liên kết biên giới góc

Kết quả bạn xem bên dưới nhé

Xem Liên kết Đường viền Góc Bút của Vian Esterhuizen (@heyvian) trên CodePen

Nguồn

Liên kết hiệu ứng chuyển màu di chuột

Kết quả bạn xem bên dưới nhé

Xem hiệu ứng chuyển màu di chuột của Liên kết bút của Pali Madra (@palimadra) trên CodePen

Nguồn

Ba hiệu ứng di chuột liên kết ưa thích

Kết quả bạn xem bên dưới nhé

Xem Pen Three Fancy Link Hover Effects của James Hancock (@jhancock532) trên CodePen

Nguồn

Tổng hợp kiểu liên kết

Kết quả bạn xem bên dưới nhé

Xem Phần tổng hợp kiểu liên kết bút của Teegan Lincoln (@teeganlincoln) trên CodePen

Nguồn

Xem trước URL liên kết

Kết quả bạn xem bên dưới nhé

Xem Bản xem trước URL liên kết Pen Pure CSS của Jon Daiello (@jondaiello) trên CodePen

Nguồn

Liên kết & Nút - Hiệu ứng vỡ

Kết quả bạn xem bên dưới nhé

Xem Nút & Liên kết Bút - Hiệu ứng Shatter của Abubaker Saeed (@AbubakerSaeed) trên CodePen

Nguồn

Hiệu ứng di chuột liên kết SCSS

Kết quả bạn xem bên dưới nhé

Xem Hiệu ứng di chuột liên kết bút của Peiwen Lu (@P233) trên CodePen

Nguồn

Liên kết hiệu ứng Hover HTML

Kết quả bạn xem bên dưới nhé

Xem các Nút di chuột SVG hoạt hình bằng bút của Tyler Peterson (@Gingernaut) trên CodePen

Nguồn

Bài viết liên quan

• Top 10 Khóa Học Lập Trình Web Trên Udemy

Tổng kết

Qua đây mình mong bài viết sẽ cung cấp thêm cho các bạn những hiệu ứng đường dẫn hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi mail 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ẻ