Tải về bản PDF Tải về bản PDF

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 của 2:
Sử dụng HTML

  1. 1
    <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. 2
    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. 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. 4
    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. 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. 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. 7
    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. 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. 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. 10
    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. 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. 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. 13
    > vào sau phần tử style. Đây là bước đóng thẻ mở button.
  14. 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. 15
    </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 của 2:
Sử dụng CSS

  1. 1
    <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. 2
    <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. 3
    .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]
    • 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. 4
    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. 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. 6
    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. 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. 8
    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. 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. 10
    } 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. 11
    </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. 12
    </head>. Đây là bước đóng phần đầu của văn bản HTML.
  13. 13
    <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

Đào BitcoinĐào Bitcoin
Biết nếu ai đó chặn bạn trên Facebook MessengerBiết nếu ai đó chặn bạn trên Facebook Messenger
Tìm xem Ai đã Chặn bạn trên FacebookTìm xem Ai đã Chặn bạn trên Facebook
Tìm kiếm bằng Hình ảnh trên GoogleTìm kiếm bằng Hình ảnh trên Google
Trò chuyện trên TinderTrò chuyện trên Tinder
Bỏ chặn Ai đó trên FacebookBỏ chặn Ai đó trên Facebook
Khắc phục lỗi không thể truy cập vào một trang webKhắc phục lỗi không thể truy cập vào một trang web
Tìm kiếm thông tin về ai đó bằng hình ảnhTìm kiếm thông tin về ai đó bằng hình ảnh
Kết nối PC với mạngKết nối PC với mạng
Kết nối mạng cho máy tính thông qua điện thoại di độngKết nối mạng cho máy tính thông qua điện thoại di động
Khôi phục tài khoản Facebook bị vô hiệu hóaKhôi phục tài khoản Facebook bị vô hiệu hóa
Đặt tên kênh YouTube hayĐặt tên kênh YouTube hay
Đặt ảnh về chế độ riêng tư trên FacebookĐặt ảnh về chế độ riêng tư trên Facebook
Nhận biết chàng trai thích bạn trên InternetNhận biết chàng trai thích bạn trên Internet
Quảng cáo

Về bài wikiHow này

Travis Boylls
Cùng viết bởi:
Tác giả & Biên tập viên viết về công nghệ
Bài viết này đã được cùng viết bởi Travis Boylls. Travis Boylls là tác giả và biên tập viên làm việc cho wikiHow. Travis có kinh nghiệm viết các bài liên quan đến công nghệ, cung cấp dịch vụ khách hàng phần mềm và thiết kế đồ họa. Anh có chuyên môn về các hệ điều hành Windows, macOS, Android, iOS và Linux. Anh học thiết kế đồ họa tại Đại học Cộng đồng Pikes Peak. Bài viết này đã được xem 1.685 lần.
Chuyên mục: Mạng Internet
Trang này đã được đọc 1.685 lần.

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

Quảng cáo