Nút là một yếu tố có thể nhấp được sử dụng để thực hiện một hành động cụ thể. Sử dụng CSS, bạn có thể đặt các kiểu nút khác nhau, một trong số đó là thay đổi màu của nút khi nhấp. Màu của nút có thể được đặt bằng cách sử dụng CSS “. lớp giả đang hoạt động

Blog này sẽ hướng dẫn bạn quy trình liên quan đến việc thay đổi màu nút khi nhấp chuột. Để làm được điều này, trước hết hãy tìm hiểu về. lớp giả tích cực

Vì vậy, hãy bắt đầu

Là gì ". đang hoạt động” trong CSS?

Có thể thay đổi màu nút khi nhấp chuột trong CSS với sự trợ giúp của “. lớp giả đang hoạt động. Trong HTML, nó cho biết một phần tử đang được kích hoạt khi người dùng nhấp vào nó. Hơn nữa, khi sử dụng chuột, quá trình kích hoạt sẽ bắt đầu khi nhấn phím chuột

cú pháp

a . hoạt động {

màu. xanh lá cây;

}

“a” đề cập đến phần tử HTML mà trên đó. lớp tích cực sẽ được áp dụng

Hãy hướng tới một ví dụ để hiểu khái niệm đã nêu

Làm cách nào để thay đổi màu nút khi nhấp trong CSS?

Để thay đổi màu của một nút khi nhấp, trước tiên, hãy tạo một nút trong tệp HTML và gán tên lớp là “btn”

HTML

< body >

< nút class="btn">Button</button>

</body>

Tiếp theo, trong CSS, đặt màu của nút. Để làm như vậy, chúng tôi sẽ sử dụng “. btn” để truy cập nút và đặt màu của nút là “rgb(0, 255, 213)”

CSS

.btn{

màu nền. rgb(0, 255, 213);

}

Sau đó, áp dụng. lớp giả đang hoạt động trên nút là “. btn. đang hoạt động” và đặt màu của nút sẽ hiển thị ở trạng thái hoạt động là “rgb(123, 180, 17)”

.btn. hoạt động{

màu nền. rgb(123, 180, 17);

}

Điều này sẽ hiển thị kết quả sau

Now, let’s add the heading with

tag and button class name “button”, inside the tag.

HTML

< trung tâm >

< h1>Change button color</h1>

<button class="button">Click Me</button>

</center>

Tiếp theo, chúng ta sẽ chuyển sang CSS và tạo kiểu cho nút và áp dụng. hoạt động trên đó. Để làm như vậy, chúng tôi sẽ đặt kiểu đường viền là “none” và đặt phần đệm là “15px”. Sau đó, đặt màu của văn bản nút là “rgb(50, 0, 54)” và nền của nó là “rgb(177, 110, 149)” và bán kính của nó là “15px”

.button{

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

đệm. 15px;

màu sắc. rgb(50, 0 . , 54);

background-color: rgb(177, 110 . , 149);

border-radius: 15px;

}

Điều này sẽ hiển thị kết quả sau

Sau đó, chúng tôi sẽ áp dụng. lớp giả đang hoạt động trên nút là “. cái nút. active” và đặt màu của nút là “rgb(200, 255, 0)”

.button. hoạt động{

màu nền. rgb(200, 255, 0);

}

Khi bạn triển khai tất cả các mã trên, hãy chuyển đến tệp HTML và thực thi nó để kiểm tra kết quả

Từ đầu ra, có thể quan sát thấy khi nhấp vào nút, màu của nó được thay đổi theo mã màu RGB được chỉ định

Phần kết luận

Để thay đổi màu của nút khi nhấp chuột trong CSS, nút “. có thể sử dụng lớp giả đang hoạt động. Cụ thể hơn, nó có thể đại diện cho phần tử nút khi nó được kích hoạt. Sử dụng lớp này, bạn có thể đặt các màu nút khác nhau khi nhấp chuột vào nó. Bài viết này giải thích quy trình thay đổi màu nút khi nhấp chuột trong CSS

Làm cách nào để kích hoạt một nút trong JavaScript?

tài liệu. getElementById("btn0"). click();

Làm cách nào để thêm lớp đang hoạt động khi nhấp bằng JavaScript?

Để thêm lớp đang hoạt động, chúng ta có thể sử dụng “getElementById()” hoặc “querySelector()” với classList. phương thức add() . Cả hai phương thức được đề cập đều lấy các phần tử theo id của chúng trước, sau đó sử dụng classList.

Làm cách nào để đặt tiêu điểm vào nút trong CSS?

Các. tiêu điểm Lớp giả CSS đại diện cho một phần tử (chẳng hạn như đầu vào biểu mẫu) đã nhận được tiêu điểm. Nó thường được kích hoạt khi người dùng nhấp hoặc chạm vào một phần tử hoặc chọn phần tử đó bằng phím Tab của bàn phím.