Nút là một phần cơ bản của HTML thực hiện nhiều tác vụ khác nhau. Bằng cách sử dụng CSS, bạn có thể thiết kế và tạo kiểu cho nút. Có nhiều cách khác nhau để thiết kế nút, chẳng hạn như tô màu nút, thay đổi kích thước, di chuột và nhiều cách khác.
Trong bài viết này, trước tiên, chúng ta sẽ học cách tạo một nút, sau đó thay đổi màu của nút khi di chuột.
Bắt đầu nào!
Làm thế nào để thay đổi màu nút trên di chuột trong CSS?
Trong CSS, “ :bay lượn ”Được sử dụng để thay đổi màu của nút khi di chuột. “ :bay lượn ”Là lớp giả cho phép thay đổi hành vi của các phần tử HTML khi di chuột qua nó, chẳng hạn như các phần tử như liên kết, nút, hình ảnh và nhiều phần tử khác.
Cú pháp của :bay lượn được cung cấp bên dưới.
Cú pháp
Trong cú pháp được cung cấp ở trên, “ một ”Đề cập đến phần tử HTML trong đó“ :bay lượn ' được áp dụng. Trong CSS, bạn có thể đặt hành vi di chuột của các phần tử HTML, chẳng hạn như màu sắc, kích thước và chiều rộng của phần tử.
Bước 1: Tạo Div và Nút
Trong HTML, trước tiên, chúng ta sẽ tạo một div và thêm một tiêu đề với
và một nút bằng cách sử dụng thẻ. Ở đây, chúng tôi sẽ gán tên lớp của nút là “ btn ”Và nội dung nút là“ Di chuột vào tôi ”.
HTML
Kết quả của đoạn mã nêu trên được đưa ra dưới đây. Bạn có thể thấy rằng tiêu đề và nút được tạo:
Bây giờ, hãy chuyển sang CSS để tạo kiểu cho div và từng nút một.
Bước 2: Nút kiểu và Div
Đầu tiên, chúng tôi sẽ tạo kiểu cho vùng chứa đã tạo bằng cách sử dụng “ div ”. Sau đó, chúng tôi sẽ đặt chiều cao của div là “ 250px ”Và màu nền là“ rgb (199, 173, 192) ”. Chúng tôi cũng sẽ sử dụng thuộc tính border để điều chỉnh đường viền của div, chiều rộng là “ 5px ”, Phong cách là“ chất rắn ”Và tô màu là“ rgb (40, 2, 55) ”.
CSS
Kết quả đầu ra bên dưới cho biết rằng kiểu đã thêm được áp dụng thành công trên div:
Trong bước tiếp theo, chúng ta sẽ tạo kiểu cho nút bằng CSS.
Bây giờ, chúng tôi sẽ tạo kiểu cho nút bằng cách sử dụng “ .btn ”Để truy cập vào nút được tạo bằng HTML. Sau đó, chúng tôi sẽ ẩn đường viền của nút bằng cách đặt “ không ai ”Là giá trị tài sản biên giới. Sau đó, chúng tôi sẽ điều chỉnh kích thước phông chữ thành “ lớn ”Và phần đệm của nút thành“ 10px ”Để tạo khoảng cách giữa nội dung của nút và đường viền của nút. Cuối cùng, chúng tôi sẽ đặt màu của văn bản và nền là “ rgb (50, 0, 54) ' và ' rgb (193, 54, 135) ”:
Nút bây giờ được tạo kiểu:
Hơn nữa, chúng tôi sẽ áp dụng “ :bay lượn ”Để thay đổi màu của nút khi di chuột.
Bước 3: Thay đổi màu nút trên Di chuột
Bây giờ, chúng tôi sẽ sử dụng “ .btn: di chuột ”Để liên kết nút với phần tử lớp giả di chuột. Do đó, di chuột sẽ được áp dụng cho nút. Tiếp theo, chúng tôi sẽ đặt màu nền và màu văn bản của nút là “ rgb (66, 2, 41) ' và ' rgb (119, 255, 0) ”. Những màu này sẽ được áp dụng cho nút khi di chuột qua nó:
Trong đầu ra được cung cấp bên dưới, bạn có thể thấy rằng, màu của nút được thay đổi khi di chuột vào nó:
Đó là nó! Chúng tôi đã giải thích phương pháp thay đổi màu nút khi di chuột bằng CSS.
Sự kết luận
Để thay đổi màu của một nút khi di chuột, hãy “ :bay lượn ”Phần tử lớp giả được sử dụng. Để làm như vậy, hãy liên kết nút với: di chuột và đặt màu của nút, màu này sẽ thay đổi khi chúng ta di chuột vào nó. Trong bài viết này, chúng tôi đã giải thích phương pháp thay đổi màu của nút khi di chuột và cung cấp một ví dụ về nó.