Các nút W3.CSS
Các lớp nút W3.CSS
W3.CSS cung cấp các lớp sau cho các nút:
| Lớp học | Xác định |
|---|---|
| w3-btn | Một nút hình chữ nhật với hiệu ứng di chuột qua bóng. Màu mặc định là màu đen. |
| nút w3 |
Một nút hình chữ nhật với hiệu ứng di chuột màu xám. Màu mặc định là xám nhạt trong phiên bản W3.CSS 3. Màu mặc định được kế thừa từ phần tử mẹ trong phiên bản 4. |
| w3-bar |
Một thanh ngang có thể được sử 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-ripple | Có thể được sử dụng để tạo hiệu ứng gợn sóng. |
nút
Cả lớp w3-button và w3-btn đều thêm hành vi của nút vào bất kỳ phần tử HTML nào.
Các phần tử phổ biến nhất được sử dụng là <input type = "button">, <button> và <a>:
Thí 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.w3schools.com" 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.w3schools.com" class="w3-btn w3-black">Link Button</a>
Màu sắc của nút
Tất cả các lớp w3- color được sử dụng để thêm màu vào các nút:
Thí 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ó tất cả các màu. Đâ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:
Thí 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 kích thước tròn-w3 được sử dụng để thêm các đường viền tròn vào các nút:
Thí 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>
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:
Thí 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 màu w3-border- color được sử dụng để xác định màu của đường viền:
Thí 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 loại kích thước tròn-w3 để thêm các đường viền tròn.
Các nút với cá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 rộng w3 thêm hiệu ứng văn bản rộng hơn:
Thí 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 chữ in nghiêng và in đậm:
Sử dụng các thẻ HTML chuẩn (<i> và <b>) để thêm hiệu ứng in nghiêng hoặc in đậm vào văn bản nút:
Thí dụ
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Các nút có đệm
Các lớp w3-padding- size được sử dụng để thêm đệm bổ sung xung quanh văn bản nút:
Thí 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>
Các nút toàn chiều rộng
Để tạo một 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 là 100% và kéo dài ra toàn bộ chiều rộng của phần tử mẹ:
Thí 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-căn trái hoặc lớp w3-căn-phải .
Kích thước của một khối có thể được xác định bằng cách sử dụng style = "width:" .
Thí 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>
Các 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 có màu mờ đục (nửa trong suốt) và hiển thị "biển báo cấm đỗ xe":
Lớp bị vô hiệu hóa w3 được sử dụng để tạo 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ế):
Thí dụ
<a class="w3-button w3-disabled" href="https://www.w3schools.com">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.w3schools.com">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 cách sử dụng lớp w3-bar :
Thí 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 W3.CSS phiên bản 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 w3-bar-item class:
Thí 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 cách sử dụng lớp trung tâm w3 :
Thí 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 :
Thí 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
Các thanh nút có thể dễ dàng được sử dụng làm thanh điều hướng:
Thí 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:" :
Thí 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.
Các nút trái và phải
Sử dụng lớp .w3-left và .w3-right để thả các nút sang trái hoặc phải:
Được sử dụng để tạo các nút "trước đó / tiếp theo":
Thí 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 với hiệu ứng Ripple
The w3-ripple class creates a ripple effect on buttons (when they are clicked on):
Example
<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>
All Elements Can Be Buttons
With W3.CSS, all elements can be a button:
A picture can be a w3-button
A picture can be a w3-btn
Any div, header, footer or other containers can be a w3-btn!
Circular Buttons
The w3-circle class can be used to create circular buttons:
Example
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
Square buttons:
Example
<button class="w3-button w3-black">+</button>
<button
class="w3-button w3-teal">+</button>