Cách để Đổi Màu Button Trong HTML - WikiHow

Có thể bạn quan tâm

Trang đầu
Ngẫu nhiên
Duyệt các Chuyên mục
Giới thiệu về wikiHow

Đăng nhập / Đăng ký

Các chính sáchCách để Đổi màu button trong HTML

Tải về bản PDF Cùng viết bởi Nhân viên của wikiHow

Tải về bản PDF X

Bài viết này có đồng tác giả là đội ngũ biên tập viên và các nhà nghiên cứu đã qua đào tạo, những người xác nhận tính chính xác và toàn diện của bài viết. Nhóm Quản lý Nội dung của wikiHow luôn cẩn trọng giám sát công việc của các biên tập viên để đảm bảo rằng mọi bài viết đều đạt tiêu chuẩn chất lượng cao. Bài viết này đã được xem 24.260 lần.

Trong bài viết này: Sử dụng HTML Sử dụng CSS Bài viết có liên quan Tham khảo

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.

Các bước

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

Sử dụng HTML

Tải về bản PDF

1 Gõ <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 các phần tử (element) thấy được của trang web bằng HTML.
2 Gõ style= vào sau "button" trong thẻ button của bạn. Đâ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 "=".
3 Thêm dấu ngoặc kép (") sau dấu bằng (=). 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.
4 Gõ background-color: vào trong dấu ngoặc kép sau "style=". 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]
6 Gõ dấu chấm phẩy (;) sau chữ background 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.
7 Gõ border-color: trong dấu ngoặc kép sau "style=". 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:".
9 Gõ dấu chấm phẩy (;) sau chữ 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.
10 Gõ color: vào trong dấu ngoặc kép sau "style=". 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 (;).
11 Gõ 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.
12 Gõ dấu ngoặc kép (") sau tất cả các phần tử style. 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.
13 Gõ > vào sau phần tử style. Đây là bước đóng thẻ mở button.
14 Gõ 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ẻ.
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

1 Gõ <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à 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] X Nguồ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 {.
4 Gõ 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.
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.
6 Gõ 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.
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".
8 Gõ 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.
9 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 chữ bên trong nút. Hãy gõ nó sau phần tử "color:" trong tập tin định kiểu nút.
10 Gõ } 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.
11 Gõ </style> sau khi bạn hoàn tất CSS của bạn. 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.
12 Gõ </head>. Đâ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

Bài viết wikiHow có liên quan

Cách đểTải Video Miễn phí từ Mọi Trang Web

Cách đểTìm kiếm thông tin về ai đó bằng hình ảnh

Cách đểXem Lịch sử Duyệt web

Cách đểTạo một trang web đơn giản với HTML

Cách đểTạo trang web đơn giản bằng Notepad

Cách đểLấy liên kết URL của hình ảnh

Cách đểChạy tập tin HTML

Cách đểTạo link tải MP3

Xem video đã xóa trên YouTube bằng WayBack Machine

Cách đểKhông bị bắt gặp khi xem phim khiêu dâm

Cách đểTải video về từ Youtube

Cách đểXem trang cá nhân Facebook không cần đăng ký

Cách đểCho phép chỉnh sửa tài liệu Google Doc

Cách đểLàm tốt vlog đầu tiên Quảng cáo

Tham khảo

↑ https://www.randombio.com/linuxsetup94.html
↑ https://help.surveygizmo.com/help/change-color-of-next-submit-and-progress-bars

Về bài wikiHow này

Cùng viết bởi: Nhân viên của wikiHow Người viết bài của wikiHow Bài viết này có đồng tác giả là đội ngũ biên tập viên và các nhà nghiên cứu đã qua đào tạo, những người xác nhận tính chính xác và toàn diện của bài viết. Nhóm Quản lý Nội dung của wikiHow luôn cẩn trọng giám sát công việc của các biên tập viên để đảm bảo rằng mọi bài viết đều đạt tiêu chuẩn chất lượng cao. Bài viết này đã được xem 24.260 lần. Chuyên mục: Mạng Internet Ngôn ngữ khác Tiếng Anh Tiếng Hàn Tiếng Tây Ban Nha Tiếng Indonesia Tiếng Đức Tiếng Thái Tiếng Hà Lan Tiếng Hindi Tiếng Bồ Đào Nha Tiếng Italy Tiếng Thổ Nhĩ Kỳ Tiếng Pháp Tiếng Nhật

Trang này đã được đọc 24.260 lần.

Bài viết này đã giúp ích cho bạn?

Có Không Quảng cáo Cookie cho phép wikiHow hoạt động tốt hơn. Bằng việc tiếp tục sử dụng trang web của chúng tôi, bạn đồng ý với chính sách cookie của chúng tôi.