Bài đăng này sẽ chỉ 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 dùng plain HTML (HTML đơn thuần) hoặc CSS (những tập tin định kiểu theo tầng) trong HTML5.
Những bước thực hiện
Phương pháp số 1 dùng HTML
1Gõ <button vào phần thân HTML. Đâ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 những phần tử (element) thấy được của trang web bằng HTML.
2Gõ style= vào sau “button” trong thẻ button của bạn. Đây là bước khai báo những phần tử style (định kiểu) vào thẻ button. Tất cả những phần tử style sẽ được đặt sau dấu “=”.
3Thêm dấu ngoặc kép (“) sau dấu bằng (=). Tất cả những phần tử style trong thẻ button HTML của bạn nên được đặt trong dấu ngoặc kép.
4Gõ background-color: vào trong dấu ngoặc kép sau “style=”. Phần tử này được dùng để đổi màu nền của nút.
5Gõ 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. dùng thanh trượt ở phía dưới cùng để chọn màu. 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.
6Gõ dấu chấm phẩy (;) sau chữ background color. dùng dấu chấm phẩy để tách rời những phần tử style khác nhau trong thẻ button HTML.
7Gõ border-color: trong dấu ngoặc kép sau “style=”. Phần tử này được dùng để tô màu của đường viền bao quanh nút. Bạn có thể đặt những 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 (;).
8Gõ 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:”.
9Gõ dấu chấm phẩy (;) sau chữ border color. dùng dấu chấm phẩy để tách rời những phần tử style khác nhau trong thẻ button HTML.
10Gõ color: vào trong dấu ngoặc kép sau “style=”. Phần tử này được dùng để đổi màu chữ của nút. Bạn có thể đặt những 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 (;).
11Gõ tên của màu hoặc mã thập lục phân. Hãy gõ nó sau “color:” trong phần tử style. Đây là bước đổi màu của chữ trong nút.
12Gõ dấu ngoặc kép (“) sau tất cả những phần tử style. Tất cả những 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ả những phần tử style của bạn, hãy gõ dấu ngoặc kép (“) ở cuối để đóng phần tử style.
13Gõ > vào sau phần tử style. Đây là bước đóng thẻ mở button. 1
4Gõ chữ của nút vào sau thẻ 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ẻ.
15Gõ </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><buttonstyle=”background-color:red; border-color:blue; color:white”>Button Text</button></body></html>
Phương pháp số 2 dùng CSS
1Gõ <head> vào trên cùng văn bản HTML của bạn. Đâ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à những tập tin định kiểu.
2Gõ <style>. Thẻ này giúp thêm vị trí trên trang web của bạn cho những 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 vài văn bản HTML 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 đó.
3Gõ .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. 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 {.
4Gõ background-color:. Đâ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.
5Gõ 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. dùng thanh trượt ở phía dưới cùng để chọn màu. 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.
6Gõ border-color:. 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.
7Gõ 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”.8Gõ color:. 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.
9Gõ 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 chữ bên trong nút. Hãy gõ nó sau phần tử “color:” trong tập tin định kiểu nút.
10Gõ } vào một dòng riêng. Đâ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.
11Gõ </style> sau khi bạn hoàn tất
CSS của bạn. Sau khi bạn tạo xong tất cả những 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. 12Gõ </head>. Đây là bước đóng phần đầu của văn bản HTML.
13Gõ <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 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><ahref=”https://www.TaiNgheTroThinh.com”class=”button”>Home</a></body></html>
