Sử dụng hiệu ứng chuyển tiếp

Sau khi thêm màu mong muốn cho trạng thái di chuột, hãy thêm thuộc tính transition vào quy tắc cho nút. Đối với quá trình chuyển đổi đơn giản, giá trị của transition là tên của thuộc tính hoặc các thuộc tính mà bạn muốn áp dụng quá trình chuyển đổi này và thời gian mà quá trình chuyển đổi sẽ diễn ra

Đối với các lớp giả :active và :focus, thuộc tính transition được đặt thành không, để nút chuyển sang trạng thái hoạt động khi được nhấp

Trong ví dụ, quá trình chuyển đổi mất 1 giây, bạn có thể thử thay đổi điều này để thấy sự khác biệt khi thay đổi tốc độ

Ghi chú. Thuộc tính transition là viết tắt của transition-delay, transition-duration, :hover0 và transition0. Xem các trang dành cho các thuộc tính này trên MDN để tìm cách điều chỉnh quá trình chuyển đổi của bạn

Để thay đổi màu nền của nút, hãy sử dụng thuộc tính màu nền

Bạn có thể thử chạy đoạn mã sau để thay đổi màu nền của nút

Thí dụ

Bản thử trực tiếp

   
      
   
   
      
Result
      
Click below for result:
      Result
   

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

Sự 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