1. Tạo kiểu cơ bản cho nút trong CSS

1.1 Tạo màu cho nút

Sử dụng thuộc tính background-color để thêm màu cho màu của nút

Ví dụ:

1.2 Chỉ định kích thước của văn bản của nút

Sử dụng thuộc tính font-size để thay đổi kích thước phông chữ của nút

Ví dụ:

Sử dụng thuộc tính padding để thay đổi kích thước của nút mà vẫn giữ nguyên kích thước của văn bản bên trong

Ví dụ:

1.3 Làm tròn nút

Thẻ mặc định các nút sẽ có hình chữ nhật, chúng ta sẽ sử dụng thuộc tính border-radius để thêm các góc tròn vào nút

Ví dụ:

1.4 Tạo màu đường viền cho nút

Sử dụng thuộc tính border để thêm đường màu cho đường viền của nút

Ví dụ:

1.5 Tạo bóng cho nút

Sử dụng thuộc tính box-shadow để tạo hiệu ứng bóng cho nút

Ví sụ:

1.6 Nút bị vô hiệu hóa

Sử dụng thuộc tính opacity để thêm độ trong suốt cho nút (tạo giao diện “bị vô hiệu hóa”).

Mẹo: Bạn cũng có thể thêm thuộc tính cursor với giá trị “not-allowed”, thuộc tính này sẽ hiển thị “biển báo cấm” khi bạn di chuột qua nút

Ví dụ:

1.7 Hiệu ứng khi di chuột qua nút

Sử dụng bộ chọn :hover để thay đổi kiểu của nút khi bạn di chuyển chuột qua nút đó

Mẹo: Sử dụng thuộc tính transition-duration để xác định tốc độ của hiệu ứng khi di chuột qua nút

Ví dụ:

1.8 Xác định chiều rộng của nút

Theo mặc định, kích thước của nút được xác định bởi nội dung văn bản của nó (rộng bằng nội dung của nó). Sử dụng thuộc tính width để thay đổi chiều rộng của nút

Ví dụ:

2. Nhóm và bố cục các nút trong CSS

2.1 Nhóm các nút theo chiều ngang

Sử dung thuộc tính float: left để nhóm nút theo chiều ngang

Ví dụ:

Sử dụng thuộc tính border để tạo đường viền cho nhóm nút

Ví dụ:

2.2 Nhóm các nút theo chiều dọc

Sử dụng display: block thay vì float: left để các nút xếp chồng lên nhau thay vì nằm cạnh nhau

Ví dụ:

3. Nút nằm bên trong hình ảnh

Ví dụ:

4. Các hoạt ảnh của nút trong CSS

Ví dụ: