Nút W3.CSS
Các lớp nút W3.CSS
W3.CSS cung cấp các lớp sau cho nút:
| Lớp học | Định nghĩa |
|---|---|
| w3-btn | Một nút hình chữ nhật có hiệu ứng đổ bóng. Màu mặc định là màu đen. |
| nút w3 | Nút hình chữ nhật có hiệu ứng di chuột màu xám. Màu mặc định là xám nhạt trong W3.CSS phiên bản 3. Màu mặc định được kế thừa từ phần tử gốc trong phiên bản 4. |
| thanh w3 | Thanh ngang dùng để nhóm các nút lại với nhau. (Hoàn hảo cho các menu điều hướng ngang) |
| khối w3 | Lớp có thể được sử dụng để xác định nút có chiều rộng đầy đủ (100%). |
| vòng tròn w3 | Có thể được sử dụng để xác định một nút tròn. |
| w3-gợn sóng | Có thể được sử dụng để tạo hiệu ứng gợn sóng. |
nút
Cả lớp w3-button và lớp w3-btn đều thêm hành vi nút vào bất kỳ thành phần HTML nào.
Các phần tử phổ biến nhất được sử dụng là <input type="button">, <button> và <a>:
Ví dụ
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="https://www.example.com.vn" class="w3-button w3-black">Link Button</a>
<input class="w3-btn w3-black" type="button" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="https://www.example.com.vn" class="w3-btn w3-black">Link Button</a>
Màu nút
mòng
Tất cả các lớp màu w3- được sử dụng để thêm màu cho các nút:
Ví dụ
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-khaki">Khaki</button>
<button class="w3-button w3-yellow">Yellow</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-purple">Purple</button>Màu di chuột
Hiệu ứng di chuột cũng có đủ màu sắc. Đây là một số:
Các lớp w3-hover- color được sử dụng để thêm màu di chuột vào các nút:
Ví dụ
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">Purple</button>Hình dạng nút
Các lớp w3-round- size được sử dụng để thêm đường viền tròn cho các nút:
Ví dụ
<button class="w3-button w3-round">Round</button>
<button class="w3-button w3-round-large">Rounder</button>
<button class="w3-button w3-round-xlarge">and Rounder</button>
<button class="w3-button w3-round-xxlarge">and Rounder</button>
<button class="w3-btn w3-round">Round</button>
<button class="w3-btn w3-round-large">Rounder</button>
<button class="w3-btn w3-round-xlarge">and Rounder</button>
<button class="w3-btn w3-round-xxlarge">and Rounder</button>
Hãy tự mình thử »Kích thước nút
Các lớp kích thước w3- có thể được sử dụng để xác định các kích thước văn bản khác nhau:
Ví dụ
<button class="w3-button w3-tiny">Tiny</button>
<button class="w3-button w3-small">Small</button>
<button class="w3-button w3-medium">Medium</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">xLarge</button>
<button class="w3-button w3-xxlarge">XXLarge</button>
<button class="w3-button w3-xxxlarge">XXXLarge</button>
<button class="w3-button w3-jumbo">Jumbo</button>
Viền nút
Lớp w3-border có thể được sử dụng để thêm đường viền cho các nút.
Các lớp w3-border- color được sử dụng để xác định màu của đường viền:
Ví dụ
<button class="w3-button w3-white w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-blue">Button</button>
<button class="w3-button w3-yellow w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">Button</button>
Mẹo: Thêm lớp w3-round- size để thêm đường viền tròn.
Các nút có hiệu ứng văn bản khác nhau
Các nút có thể sử dụng hiệu ứng văn bản rộng hơn:
Lớp w3-wide thêm hiệu ứng văn bản rộng hơn:
Ví dụ
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Các nút có thể có hiệu ứng văn bản in nghiêng và in đậm:
Sử dụng thẻ HTML tiêu chuẩn (<i> và <b>) để thêm hiệu ứng in nghiêng hoặc in đậm cho văn bản nút:
Ví dụ
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Nút Có Đệm
Các lớp kích thước w3-padding- được sử dụng để thêm phần đệm bổ sung xung quanh văn bản nút:
Ví dụ
<button class="w3-button w3-padding-small">Button</button>
<button class="w3-button">Button</button>
<button class="w3-button w3-padding-large">Button</button>
<button class="w3-btn w3-padding-small">Button</button>
<button class="w3-btn">Button</button>
<button class="w3-btn w3-padding-large">Button</button>
Nút có chiều rộng đầy đủ
Để tạo nút có chiều rộng đầy đủ, hãy thêm lớp khối w3 vào nút.
Các nút có chiều rộng đầy đủ có chiều rộng 100% và kéo dài toàn bộ chiều rộng của phần tử gốc:
Ví dụ
<button class="w3-button w3-block">Button</button>
<button class="w3-button w3-block w3-teal">Button</button>
<button class="w3-button w3-block w3-red w3-left-align">Button</button>
<button class="w3-btn w3-block">Button</button>
<button class="w3-btn w3-block w3-teal">Button</button>
<button class="w3-btn w3-block w3-red w3-left-align">Button</button>
Mẹo: Căn chỉnh văn bản nút với lớp w3-left-align hoặc lớp w3-right-align .
Kích thước của khối có thể được xác định bằng cách sử dụng style="width:" .
Ví dụ
<button class="w3-button w3-block w3-black"
style="width:30%">Button</button>
<button class="w3-button w3-block w3-teal" style="width:50%">Button</button>
<button class="w3-button w3-block w3-red" style="width:80%">Button</button>
Nút bị vô hiệu hóa
Các nút nổi bật với hiệu ứng đổ bóng và con trỏ biến thành bàn tay khi di chuột qua chúng.
Các nút bị tắt sẽ mờ đục (bán trong suốt) và hiển thị "biển báo cấm đỗ xe":
Lớp w3-disabled được sử dụng để tạo một nút bị vô hiệu hóa (nếu phần tử hỗ trợ thuộc tính bị vô hiệu hóa HTML tiêu chuẩn, bạn có thể sử dụng thuộc tính bị vô hiệu hóa thay thế):
Ví dụ
<a class="w3-button w3-disabled" href="https://www.example.com.vn">Link Button</a>
<button class="w3-button" disabled>Button</button>
<input type="button" class="w3-button" value="Button" disabled>
<a class="w3-btn w3-disabled" href="https://www.example.com.vn">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
Thanh nút
Các nút có thể được nhóm lại với nhau trong một thanh ngang bằng lớp w3-bar :
Ví dụ
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-red">Button</button>
</div>
Lớp w3-bar được giới thiệu trong phiên bản W3.CSS 2.93/2.94.
Các nút có thể được nhóm lại với nhau mà không có khoảng cách giữa chúng bằng cách sử dụng lớp w3-bar-item :
Ví dụ
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black">Button</button>
<button class="w3-bar-item w3-button w3-teal">Button</button>
<button class="w3-bar-item w3-button w3-red">Button</button>
</div>
Các thanh nút có thể được căn giữa bằng lớp w3-center :
Ví dụ
<div class="w3-center">
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-disabled">Button</button>
</div>
</div>
Để hiển thị hai (hoặc nhiều) thanh nút trên cùng một dòng, hãy thêm lớp w3-show-inline-block :
Ví dụ
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
<div
class="w3-show-inline-block">
<div
class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
Thanh điều hướng
Thanh nút có thể dễ dàng được sử dụng làm thanh điều hướng:
Ví dụ
<div class="w3-bar w3-black">
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
</div>Kích thước của từng mục có thể được xác định bằng cách sử dụng style="width:" :
Ví dụ
<div
class="w3-bar">
<button class="w3-bar-item w3-button"
style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button
w3-teal" style="width:33.3%">Button</button>
<button
class="w3-bar-item w3-button w3-red" style="width:33.3%">Button</button>
</div>
Bạn sẽ tìm hiểu thêm về điều hướng sau trong hướng dẫn này.
Nút trái và phải
Sử dụng lớp .w3-left và lớp .w3-right để di chuyển các nút sang trái hoặc sang phải:
Được sử dụng để tạo các nút "trước/tiếp theo":
Ví dụ
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>Các nút có hiệu ứng gợn sóng
Lớp w3-ripple tạo hiệu ứng gợn sóng trên các nút (khi chúng được nhấp vào):
Ví dụ
<button class="w3-button w3-ripple">Button</button>
<button
class="w3-button w3-ripple w3-red">Button</button>
<button class="w3-button
w3-ripple w3-yellow">Button</button>
Tất cả các yếu tố có thể là nút
Với W3.CSS, tất cả các thành phần đều có thể là một nút:
Một hình ảnh có thể là nút w3
Một hình ảnh có thể là w3-btn
Bất kỳ div, tiêu đề, chân trang hoặc vùng chứa nào khác đều có thể là w3-btn !
Nút tròn
Lớp w3-circle có thể được sử dụng để tạo các nút tròn:
Ví dụ
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
Nút vuông:
Ví dụ
<button class="w3-button w3-black">+</button>
<button
class="w3-button w3-teal">+</button>
