Ai không thích các nút tạo kiểu và hiệu ứng di chuột bằng CSS? Một nút có nghĩa là hành động. Nhấp hoặc khai thác vào một cho phép bạn làm mọi việc. Các nút HTML là một yếu tố thiết yếu của thiết kế tương tác. Đó là lý do tại sao họ rất quan trọng và đó là lý do tại sao nó tốt để làm cho họ đúng.
Vì vậy, khi tôi phải thiết kế các nút và hình ảnh động lơ lửng của chúng, tôi muốn tìm kiếm một số cảm hứng trước tiên. Nơi yêu thích mọi thời đại của tôi để làm điều đó là Codepen. Dưới đây, một danh sách các hiệu ứng di chuột của nút CSS tôi đã kết hợp với nhau để bắt đầu. Tôi hy vọng bạn vui!
Dễ dàng nhưng bắt mắt CSS gửi các nút hiệu ứng di chuột, bằng cách hoạt hình các trò chơi: trước khi và và sau: sau các yếu tố giả.
Nút CSS hiệu ứng di chuột
Bốn ví dụ về nút di chuột CSS chứa hiệu ứng neon, hiệu ứng nền góc, hiệu ứng bóng và hiệu ứng xung.
Nút di chuột hiệu ứng
Tôi đã tạo tám hiệu ứng di chuột nút CSS thuần túy với Box-Shadow. Mỗi nút có hiệu ứng độc đáo riêng được áp dụng cho nó. Tôi chủ yếu sử dụng Box-Shadow để tạo ra các hiệu ứng, nhưng tôi cũng kết hợp các hiệu ứng như khoảng cách chữ cái và đường viền-Radius để cung cấp độ tương phản năng động hơn trong các hình ảnh động.
Ba hiệu ứng di chuột của nút CSS đơn giản
Ba hình ảnh động của nút CSS với sự chuyển tiếp mát mẻ.
Hình hoạt hình nút ma
Đây là một cái gì đó tôi nhanh chóng tạo ra dựa trên một phát súng của Nikola Popovic.
Nút hoạt hình di chuột gradient
Tôi thiết kế lại nút ma của trang web của tôi. Đó là một cách có thể cho thiết kế trang web tiếp theo của tôi.
Amy Winehouse Doc Nút
Tôi đã muốn tạo nút này trong một thời gian dài, và cuối cùng đã có được nó.
Sáu hình ảnh động của nút CSS thuần túy
Sáu hình ảnh động nút tuyệt vời chỉ sử dụng CSS3 thuần túy.
Nút ma hoạt hình
Một hình ảnh động nút CSS giống như ma thú vị được thực hiện để sử dụng trong trang web của bạn.
Nút di chuột hoạt hình
Một bộ hình ảnh động di chuột.
Nút.css: hình ảnh động nút CSS3
Một bộ sưu tập các hình ảnh động nút CSS3.
CSS 8 bit lơ lửng
Hiệu ứng di chuột lấy cảm hứng từ 8 bit.
Xem Pen 8 bit CSS lơ lửng bởi TSTOIK (@TSTOIK) trên Codepen.
Các nút Hover hoạt hình SVG
Rất nhiều người thích các nút tôi đã tạo cho trang web của mình vì vậy tôi đã ném một codepen và thêm bình luận. Đây là triển khai HTML/CSS thuần túy của một số nút SVG với hiệu ứng di chuột mát mẻ. Màu sắc và hình dạng có thể được tùy chỉnh để phù hợp với nhu cầu của bạn.
Hộp/nút lơ lửng
Hộp HTML/CSS và các hiệu ứng bong tróc nút.
Khám phá nút
Chỉ là một loại chuyển đổi nút thử nghiệm.
Xem nút Bút Khám phá bởi Vanderlanth (@vanderlanth) trên Codepen.
Nút lơ lửng trạng thái
Snazzy CSS Hover trạng thái cho một nút.
Nút hoạt hình
Bảy thực hành hoạt hình nút BEANT dựa trên nền CSS.
Xem nút hoạt hình bút của Lichin-lin (@lichin-lin) trên Codepen.
OK Nút CSS
CSS Hover Effect trên các biểu tượng hoạt hình.
Xem nút Bút OK CSS bằng FixCl (@FIXCL) trên CodePen.
Nút đậu mát 60fps
Chúng tôi có thể dễ dàng làm cho các nút hoạt hình của chúng tôi hoạt động hơn. Chỉ sử dụng các biến đổi và độ mờ chỉ cho hình ảnh động. Sau đó, sử dụng sẽ thay đổi ý chí: biến đổi; Để cho trình duyệt biết những gì hoạt hình nằm ở phía trước.
Thử nghiệm hoạt hình nút
Một cây bút hoạt hình nút nhanh khác dựa trên một bài viết Dribbble mà tôi thích bởi Daniel Jecha.
Nút chơi game có hiệu ứng di chuột
Một nút tôi đã xây dựng cho một trang web trò chơi, thanh trượt từ trái sang phải khi di chuột.
Các nút CSS đầy màu sắc
Một bộ sưu tập các loại nút CSS khác nhau trong nhiều màu sắc khác nhau.
Bộ sưu tập các hiệu ứng di chuột
Một vài ví dụ về các hiệu ứng lơ lửng nút hào nhoáng. Hiện đang cập nhật cây bút này. Làm việc đang tiến triển…
Nút Blobs
Ban đầu tôi tìm thấy nút này trên trang web này - //isl.co/ và tái tạo nó.
Xem nút BENS BLOBS của Suez (@Suez) trên Codepen.
Nút CSS kích thích
Một con chuột nút gọn gàng và đơn giản qua hiệu ứng.
Một nửa nút đầy đủ hơn
Tôi thực sự thích các nút trên bài viết Behance này, vì vậy tôi muốn thử và tạo một số cho trang web của mình. Họ thật tuyệt vời.
Nút liên hệ
Nút liên hệ từ bắn Dribbble chỉ bằng CSS.
Xem nút liên hệ bút của Ajerez (@ajerez) trên Codepen.
Nút đơn giản di chuột
Hiệu ứng di chuột bóng nhiều lớp đơn giản trên một nút.
Nút di chuột hiệu ứng
Một số hiệu ứng di chuột bằng cách sử dụng các phần tử psuedo và biên giới.
Nút hình hoạt hình phác thảo trên di chuột
Lấy cảm hứng từ các nút Tìm hiểu thêm các nút được tìm thấy ở đây: //kenjiendo.com/news/
Nút hoạt hình lơ lửng hiệu ứng
Một phong cách hover nút CSS lấy cảm hứng từ Pokemon GO được thực hiện để thực hành.
Star Trek Lcars Style Ghost Nút
Đối với một trong những dự án mới nhất của chúng tôi với một công ty bảo mật thông tin địa phương, chúng tôi đã đi với một chủ đề công nghệ. Các nút này được lấy cảm hứng từ giao diện máy tính được nhìn thấy trong Star Trek với một chút hiệu ứng chuyển tiếp trên di chuột.
Các nút hoạt hình CSS3
Các nút CSS thử nghiệm của Designify.me
Các nút tương tác CSS
Cảm hứng cho những cách mới để tạo các nút tương tác bằng cách sử dụng các cấp độ tuyến tính, bóng hộp và các lớp giả!
Khái niệm Nút Ghost Gradient hoạt hình
Nút ma.Biên giới gradient hoạt hình và văn bản.Nền trong suốt.Hoạt hình vẽ dòng CSS.Khung đường dẫn.Không có SVG.CSS thuần túy.
Trượt văn bản trên Hover Animation
Chỉ là một ví dụ nhanh chóng về một hình ảnh động nút đơn giản.
Hiệu ứng bong bóng nút
Một hiệu ứng di chuột bằng cách sử dụng các thủ thuật gooey.