Cách để Đổi màu button trong HTML

Bài viết này sẽ hướng dẫn bạn cách đổi màu button (nút) trong HTML. Bạn có thể thay đổi màu nút bằng cách sử dụng plain HTML (HTML đơn thuần) hoặc CSS (các tập tin định kiểu theo tầng) trong HTML5.

Phương pháp 1

Phương pháp 1 của 2:

Sử dụng HTML

Tải về bản PDF

Đây là khởi đầu của thẻ (tag) button của dòng mã HTML. Phần thân của HTML là đoạn giữa hai thẻ <body> và </body>. Phần thân là nơi đặt các phần tử (element) thấy được của trang web bằng HTML.
Đây là bước khai báo các phần tử style (định kiểu) vào thẻ button. Tất cả các phần tử style sẽ được đặt sau dấu "=".
Tất cả các phần tử style trong thẻ button HTML của bạn nên được đặt trong dấu ngoặc kép.
Phần tử này được sử dụng để đổi màu nền của nút.
5
Gõ tên màu hoặc mã thập lục phân vào sau "background-color:". Bạn có thể gõ tên của màu (chẳng hạn như blue) hoặc màu thập lục phân.
- Nếu muốn tìm kiếm mã thập lục phân (Hex), hãy truy cập https://www.google.com/search?q=color+picker bằng trình duyệt web. Sử dụng thanh trượt ở phía dưới cùng để chọn màu. Sử dụng hình tròn trong cửa sổ để chọn sắc thái của màu. Bôi đen và sao chép (copy) mã gồm 6 số (bao gồm cả dấu thăng) trong thanh bên trái và dán nó vào thẻ button của bạn.
- Bạn cũng có thể gõ chữ "transparent" làm màu nền trong suốt.^{[1]XNguồn nghiên cứu}
Sử dụng dấu chấm phẩy để tách rời các phần tử style khác nhau trong thẻ button HTML.
Phần tử này được sử dụng để tô màu của đường viền bao quanh nút. Bạn có thể đặt các phần tử style theo bất cứ trình tự nào trong dấu ngoặc kép sau "style=". Mỗi phần tử phải được tách rời bằng dấu chấm phẩy (;).
8
Gõ tên màu hoặc mã thập lục phân cho màu viền. Tên màu hoặc mã thập lục phân cho đường viền sẽ nằm sau phần tử "border-color:".
- Nếu bạn muốn gỡ bỏ đường viền, hãy gõ border:none thay cho phần tử "border-color:".
Sử dụng dấu chấm phẩy để tách rời các phần tử style khác nhau trong thẻ button HTML.
Phần tử này được sử dụng để đổi màu chữ của nút. Bạn có thể đặt các phần tử style theo bất cứ trình tự nào trong dấu ngoặc kép sau "style=". Mỗi phần tử phải được tách rời bằng dấu chấm phẩy (;).
Hãy gõ nó sau "color:" trong phần tử style. Đây là bước đổi màu của chữ trong nút.
Tất cả các phần tử style của bạn nên được đặt trong cặp dấu ngoặc kép sau "style=" trong thẻ button. Khi bạn hoàn tất việc thêm tất cả các phần tử style của bạn, hãy gõ dấu ngoặc kép (") ở cuối để đóng phần tử style.
Đây là bước đóng thẻ mở button.
Sau khi bạn tạo xong thẻ mở cho nút, hãy gõ chữ mà bạn muốn viết vào trong nút phía sau thẻ.
15
Gõ </button> vào sau chữ của nút. Đây là thẻ đóng của nút. Nút của bạn đã được tạo xong. Mã HTML của bạn trông sẽ có dạng như sau.
```
<!DOCTYPE html><html><body><button style="background-color:red; border-color:blue; color:white">Button Text</button></body></html>
```
Quảng cáo

Phương pháp 2

Phương pháp 2 của 2:

Sử dụng CSS

Tải về bản PDF

Đây là bước tạo ra phần đầu cho văn bản HTML của bạn. Phần đầu của văn bản là nơi đặt thông tin không được hiển thị trên trang web của bạn. Phần này bao gồm siêu dữ liệu, tiêu đề của trang và các tập tin định kiểu.
2
Gõ <style>. Thẻ này giúp thêm vị trí trên trang web của bạn cho các tập tin định kiểu theo tầng (CSS). Phần này nằm ở đầu văn bản HTML của bạn.
- Một số văn bản HTML sử dụng tập tin định kiểu ở ngoài. Trong trường hợp này, bạn sẽ cần tìm kiếm vị trí của tập tin CSS ở ngoài và chỉnh sửa tập tin định kiểu nút trên văn bản đó.
3
Gõ .button { vào một dòng riêng sau phần style. Đây là bước mở tập tin định kiểu cho nút mà bạn đang tạo kiểu. ^{[2]XNguồn nghiên cứu}
- Bạn cũng có thể khiến nút đổi màu khi di con trỏ chuột vào nút bằng cách tạo tập tin định kiểu riêng có thẻ mở là .button:hover {.
. Đây là một dòng riêng trong tập tin định kiểu nút. Phần tử này giúp đổi màu nền của nút.
5
Gõ tên của màu hoặc mã thập lục phân rồi gõ dấu chấm phẩy (;). Hãy gõ nó sau phần tử "background-color:" trong tập tin định kiểu nút. Đây là bước đổi màu nền của nút.
- Nếu muốn tìm kiếm mã thập lục phân (Hex), hãy truy cập https://www.google.com/search?q=color+picker bằng trình duyệt web. Sử dụng thanh trượt ở phía dưới cùng để chọn màu. Sử dụng hình tròn trong cửa sổ để chọn sắc thái của màu. Bôi đen và sao chép mã gồm 6 số (bao gồm cả dấu thăng) trong thanh bên trái.
- Bạn cũng có thể gõ chữ "transparent" làm màu nền để khiến nền trở nên trong suốt.
. Phần tử này giúp đổi màu của đường viền bao quanh nút. Hãy gõ nó vào một dòng riêng trong tập tin định kiểu nút.
7
Gõ tên của màu hoặc mã thập lục phân rồi gõ dấu chấm phẩy (;). Đây là bước đổi màu của đường viền bao quanh nút. Hãy gõ nó sau phần tử "border-color:" trong tập tin định kiểu nút.
- Nếu bạn muốn gỡ bỏ đường viền, hãy gõ border:none; thay cho phần tử "border-color:tênmàu".
. Hãy gõ nó vào một dòng riêng trong tập tin định kiểu. Phần tử này giúp đổi màu của chữ trong nút.
Đây là bước đổi màu của chữ bên trong nút. Hãy gõ nó sau phần tử "color:" trong tập tin định kiểu nút.
Đây là bước đóng tập tin định kiểu nút của bạn. Bạn có thể tạo ra nhiều tập tin định kiểu nút, miễn là đặt tên khác nhau cho từng nút.
Sau khi bạn tạo xong tất cả các tập tin định kiểu của bạn, hãy gõ "</style>" vào một dòng riêng để đóng phần định kiểu văn bản HTML của bạn.
Đây là bước đóng phần đầu của văn bản HTML.
13
Gõ <a href="url" class="button">Chữ trong nút</a> vào phần thân văn bản HTML của bạn. Đây là bước thêm nút vào phần thấy được của HTML bằng cách sử dụng tập tin định kiểu trong phần Style của văn bản HTML. Hãy thay thế "url" bằng địa chỉ web mà nút được liên kết đến. Phần thân văn bản HTML của bạn là đoạn giữa hai thẻ <body> và </body> của văn bản HTML. Mã HTML của bạn trông sẽ có dạng như sau:
```
<!DOCTYPE html><html><head><style>.button { background-color:blue; border-color:red; color:white;}</style></head><body><a href="https://www.wikihow.com" class="button">Home</a></body></html>
```
Quảng cáo