Nút là một phần 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 chuột. Màu của một nút có thể được đặt bằng cách sử dụng CSS “ :tích cực ”Hạng giả.
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. Đối với điều này, trước tiên, hãy tìm hiểu về: lớp giả hoạt động.
Vì vậy, hãy bắt đầu!
“: Active” trong CSS là gì?
Có thể thay đổi màu nút khi nhấp trong CSS với sự trợ giúp của “ :tích cực ”Hạng giả. Trong HTML, nó chỉ ra 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
một : tích cực {
màu sắc : màu xanh lá ;
}
“ một ”Đề cập đến phần tử HTML mà lớp: active sẽ được áp dụng.
Chúng ta hãy hướng tới một ví dụ để hiểu khái niệm đã nêu.
Làm thế nào để thay đổi màu nút khi nhấp chuột trong CSS?
Để thay đổi màu của nút khi nhấp chuột, trước tiên, hãy tạo một nút trong tệp HTML và gán tên lớp “ btn ”.
HTML
< thân hình >< cái nút lớp = 'btn' > Cái nút < / cái nút >
< / thân hình >
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 vào 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 đó, hãy áp dụng: lớp giả đang hoạt động trên nút là “ .btn: 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 : tích cực {màu nền : rgb ( 123 , 180 , 17 ) ;
}
Điều này sẽ cho thấy kết quả sau:
Bây giờ, hãy thêm tiêu đề với thẻ
và tên lớp nút “ cái nút ”, Bên trong thẻ .
HTML
< trung tâm >
< h1 > Thay đổi màu nút < / h1 >
< cái nút lớp = 'cái nút' > Nhấp vào đây < / cái nút >
< / trung tâm >
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à “ không ai ”Và đưa ra 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 ”:
.cái nút {
biên giới : không ai ;
đệm lót : 15px ;
màu sắc : rgb ( năm mươi , 0 , 54 ) ;
màu nền : rgb ( 177 , 110 , 149 ) ;
bán kính biên giới : 15px ;
}
Điều này sẽ cho thấy kết quả sau:
Sau đó, chúng tôi sẽ áp dụng: lớp giả hoạt động trên nút là “ .button: hoạt động ”Và đặt màu của nút là“ rgb (200, 255, 0) ”:
.cái nút : tích cực {
màu nền : rgb ( 200 , 255 , 0 ) ;
}
Sau khi bạn triển khai tất 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 nút khi nhấp chuột trong CSS, hãy chọn “ :tích cực ”Pseudo-class có thể được sử dụ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 con chuột nhấp 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.
HTML
< trung tâm >< h1 > Thay đổi màu nút < / h1 >
< cái nút lớp = 'cái nút' > Nhấp vào đây < / cái nút >
< / trung tâm >
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à “ không ai ”Và đưa ra 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 ”:
.cái nút {biên giới : không ai ;
đệm lót : 15px ;
màu sắc : rgb ( năm mươi , 0 , 54 ) ;
màu nền : rgb ( 177 , 110 , 149 ) ;
bán kính biên giới : 15px ;
}
Điều này sẽ cho thấy kết quả sau:
Sau đó, chúng tôi sẽ áp dụng: lớp giả hoạt động trên nút là “ .button: hoạt động ”Và đặt màu của nút là“ rgb (200, 255, 0) ”:
.cái nút : tích cực {màu nền : rgb ( 200 , 255 , 0 ) ;
}
Sau khi bạn triển khai tất 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 nút khi nhấp chuột trong CSS, hãy chọn “ :tích cực ”Pseudo-class có thể được sử dụ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 con chuột nhấp 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.