50 Hướng dẫn về nút CSS3 dành cho nhà thiết kế [2017]
Trong bài viết này, chúng tôi sẽ đi qua một số chọn bằng tay, hướng dẫn tuyệt vời cho các nút bạn có thể đặt trên trang web của bạn chỉ sử dụng CSS3.
Một số các nút này chơi với màu sắc, độ dốc hoặc hình dạng trong khi những cái khác được lập trình để tạo hiệu ứng với các hành động di chuột hoặc nhấp chuột, tạo ra các hiệu ứng như bị đẩy xuống; mở rộng, thu hẹp hoặc chuyển đổi khung để tiết lộ thêm thông tin. Bất cứ điều gì bạn có thể nghĩ ra để làm với các nút, có lẽ có một ví dụ về nó ở đây.
Hãy cho chúng tôi biết đâu là sở thích của bạn.
Nút bật / tắt kiểu dáng đẹp
Hướng dẫn / mã - Demo
Tạo nút Burger SVG HTML
Hướng dẫn / mã - Demo
Tạo các nút CSS thời trang
Hướng dẫn / mã - Demo
Các nút xã hội ẩn CSS3
Hướng dẫn / mã - Demo
Nút điều hướng cố định thông minh
Hướng dẫn / mã - Demo
Kiểu điều hướng chấm
Hướng dẫn / mã - Demo
Hiệu ứng nút biến đổi giống như Shazam
Hướng dẫn / mã - Demo
Cách tạo các nút CSS3
Hướng dẫn / mã - Demo
Tạo một nút tiến độ tròn
Hướng dẫn / mã - Demo
Nút chuyển đổi với hộp kiểm
Hướng dẫn / mã - Demo
Các nút CSS với các phần tử giả
Hướng dẫn / mã - Demo
Công tắc
Hướng dẫn / mã - Demo
Nút phẳng đẹp
Hướng dẫn / mã - Demo
Các nút phẳng với hiệu ứng Hover Animated
Hướng dẫn / mã - Demo
Nút trượt đơn giản
Hướng dẫn / mã - Demo
Nút CSS
Hướng dẫn / mã - Demo
Nút CSS 3D
Hướng dẫn / mã - Demo
Nút CSS
Hướng dẫn / mã - Demo
Hoàn toàn CSS
Hướng dẫn / mã - Demo
Nút CSS màu hồng và màu xanh
Hướng dẫn / mã - Demo
Các nút CSS được làm tròn với hiệu ứng di chuột
Hướng dẫn / mã - Demo
Nút khái niệm
Hướng dẫn / mã - Demo
Nút CSS
Hướng dẫn / mã - Demo
Ba nút CSS thuần
Hướng dẫn / mã - Demo
Nút CSS có thể ép lớn
Hướng dẫn / mã - Demo
Ba hiệu ứng di chuột bằng nút CSS đơn giản
Hướng dẫn / mã - Demo
Nút đăng ký tắt
Hướng dẫn / mã - Demo
Hiệu ứng di chuột bằng nút CSS
Hướng dẫn / mã - Demo
Nút CSS với hiệu ứng Hover Slide
Hướng dẫn / mã - Demo
Nút CSS + 3D
Hướng dẫn / mã - Demo
Các nút CSS3 hoạt hình
Hướng dẫn / mã - Demo
Nút radio bóng dài
Hướng dẫn / mã - Demo
Hiệu ứng di chuột bằng nút CSS đơn giản
Hướng dẫn / mã - Demo
Nút CSS thập niên 70
Hướng dẫn / mã - Demo
Nút 3d đẩy
Hướng dẫn / mã - Demo
Nút biểu tượng xoay Đoạn mã CSS
Hướng dẫn / mã - Demo
Trượt để mở nút chuyển đổi CSS jQuery
Hướng dẫn / mã - Demo
Hoạt hình Goo CSS JavaScript Goo
Hướng dẫn / mã - Demo
Nút bỏ phiếu hoạt hình CSS
Hướng dẫn / mã - Demo
Nút yêu thích CSS
Hướng dẫn / mã - Demo
Các nút xã hội thiết kế vật liệu CSS
Hướng dẫn / mã - Demo
Nút hành động nổi CSS lấy cảm hứng từ Google
Hướng dẫn / mã - Demo
Nhấn nút tôi
Hướng dẫn / mã - Demo
Nút phát sáng CSS SVG
Hướng dẫn / mã - Demo
CSS JS Chuyển đổi các nút điều hướng
Hướng dẫn / mã - Demo
Nút Squishy-ish
Hướng dẫn / mã - Demo
Nút CSS 2
Hướng dẫn / mã - Demo
Nút Fizzy CSS
Hướng dẫn / mã - Demo
Nút thực hành
Hướng dẫn / mã - Demo
Nút CSS
Hướng dẫn / mã - Demo
Nút CSS mát mẻ Hoạt hình viền
Hướng dẫn / mã - Demo
