tag and a button using the tag with the class name as “btn”. The text that will display on the button is “Color”.

HTML

="div">="div">

>>

>Thay đổi màu của nút trong CSS>>Change Button Color in CSS>

< nút lớp ="btn">Color>

>>

>>

Có thể thấy rằng div và một nút được tạo

Bây giờ, chúng ta sẽ chuyển sang bước tiếp theo để tạo kiểu cho div đã tạo bằng CSS

Bước 2. Div kiểu

Ở đây, sử dụng “. div” để truy cập vùng chứa đã tạo và đặt chiều cao của nó là “200px”. Sau đó, tạo kiểu cho div bằng cách sử dụng thuộc tính "đường viền" để đặt đường viền xung quanh div. Chiều rộng của đường viền được đặt là “4px”, kiểu của nó là “rãnh” và màu là “rgb(1, 34, 77)”. Chúng tôi sẽ đặt hình dạng của đường viền với thuộc tính “bán kính đường viền” và đặt giá trị của nó là “25px”. Sau đó, sử dụng thuộc tính “background-color” để đặt màu nền của div và gán giá trị của màu là “rgb(210, 243, 241)”

CSS

.div{

chiều cao. 200px;

đường viền. 4px rãnh rgb(1, 34, 77);

bán kính đường viền. 25px;

màu nền. rgb(210, 243, 241);

}

Kết quả là vùng chứa đã tạo sẽ được tạo kiểu

Hãy chuyển sang bước cuối cùng, trong đó chúng ta tô màu nút bằng CSS

Bước 3. Thay đổi màu nút

Sau khi tạo kiểu cho div trong CSS, chúng tôi sẽ sử dụng “. btn” để truy cập nút được tạo trong HTML. Sau đó, đặt giá trị của thuộc tính đường viền là “none” để xóa kiểu đường viền mặc định. Chỉ định giá trị thuộc tính bán kính đường viền là “15px” để đặt hình dạng của nút

Tạo kiểu cho văn bản của nút bằng thuộc tính cỡ chữ và đặt giá trị của nó là “xx-large”. Sau đó, chúng tôi sẽ sử dụng phần đệm là “10px” để tạo khoảng cách giữa văn bản được thêm vào và đường viền của nút

Cuối cùng, sử dụng thuộc tính color và đặt giá trị của nó là “rgb(255, 251, 7)” để tô màu cho văn bản và thuộc tính background-color là “rgb(43, 87, 84)” để đặt màu cho nút

.btn{

đường viền. không;

bán kính đường viền. 15px;

cỡ chữ. xx-lớn;

phần đệm. 10px;

màu. rgb(255, 251, 7);

màu nền. rgb(43, 87, 84);

}

Đầu ra đã cho cho biết rằng màu của nút được thay đổi thành công

Chúng tôi đã giải thích phương pháp thay đổi màu của nút trong CSS

Phần kết luận

Trong CSS, thuộc tính “background-color” được sử dụng để đặt màu cho nút. Sử dụng điều này, bạn có thể đặt màu theo lựa chọn của mình và thiết kế một nút trang nhã. Bạn cũng có thể sử dụng các thuộc tính khác nhau để cải thiện giao diện của nút bằng CSS. Trong hướng dẫn này, chúng tôi đã giải thích phương pháp thay đổi màu của nút trong CSS và cung cấp một ví dụ để bạn hiểu rõ hơn

Làm cách nào để thay đổi màu chữ trong HTML?

Bạn có thể sử dụng thuộc tính màu CSS để thay đổi màu văn bản. Thuộc tính này chấp nhận các giá trị màu như mã Hex, RGB, HSL hoặc tên màu.

Làm cách nào để thay đổi màu của văn bản khi nhấp vào nút?

Đầu tiên, bạn cần tìm phần tử mà bạn muốn thay đổi màu sắc bằng tài liệu. getElementsByTagName("nút")[0]; . Tiếp theo, sử dụng trình xử lý sự kiện trên phần tử nút để nghe lượt nhấp. Khi nhấp chuột thực hiện, phần tử p sẽ đổi màu thành xanh lam .

Đọc tiếp