Một cách để làm cho các nút mẫu của bạn trông không chỉ độc đáo và phù hợp với thương hiệu mà còn mời khán giả của bạn nhấp vào là thêm chế độ di chuột bắt mắt Show Các nút của Squarespace đã cung cấp hai kiểu
Nhưng nếu bạn muốn thay đổi theo cách khác thì sao? Trong bài đăng này, bạn sẽ tìm hiểu cách bạn có thể đạt được hai hiệu ứng đó bằng một vài dòng CSS
Tìm lớp của nút của bạnTrước tiên, bạn cần tìm các loại nút của mình thông qua phần tử kiểm tra (tôi khuyên bạn nên sử dụng Chrome) bằng cách nhấp chuột phải vào nút bạn muốn thay đổi và chọn Kiểm tra  Tiếp theo, với phần tử đã chọn, chuyển đến thanh bên phải và từ nhóm lớp trên cùng, đánh dấu và sao chép phần có màu đen Văn bản tô xám đề cập đến các lớp nút có cùng kiểu với nút bạn đang chọn (e. g tròn) nhưng ở các kích cỡ khác nhau. Phần màu đen, là các lớp cho kích thước nút bạn đang chọn. Trong trường hợp này, cả nhóm đọc .small-button-shape-rounded .sqs-block-button .sqs-block-button-element--small, .medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium, .large-button-shape-rounded .sqs-block-button .sqs-block-button-element—large { } Nhưng chỉ phần màu xám đậm sẽ được sử dụng trong ví dụ này để sửa đổi nút kích thước trung bình Hãy nhớ rằng tùy thuộc vào kiểu nút bạn đang sử dụng, các lớp của bạn sẽ khác nhau
Thay đổi màu của nút khi di chuộtĐể thay đổi màu nền của nút cố định, bạn chỉ cần mã hex thứ hai để thay đổi thuộc tính màu nền. Trong ví dụ này, nó sẽ chuyển từ màu đen sang màu lục lam, #009999 Với nhóm các lớp được chọn, hãy chuyển đến cửa sổ chèn CSS của bạn và dán các lớp bạn nhận được từ cửa sổ phần tử kiểm tra .medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium { } Nếu bạn thay đổi các thuộc tính của đoạn mã đó như hiện tại, bạn sẽ thay đổi chính nút đó. dùng thử. Thêm phần này vào đoạn mã của bạn và xem nút thay đổi màu nền như thế nào .medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium { background-color: #009999; } Tuy nhiên, vì bạn muốn chỉnh sửa chế độ di chuột, bạn cần sử dụng lớp giả. di chuột sau lớp cuối cùng như vậy .medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium:hover { } Bây giờ, bất kỳ thay đổi nào bạn thực hiện sẽ được áp dụng cho chế độ di chuột của nút .medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium:hover { background-color: #009999; }
Thay đổi một nút từ khối thành đường viềnĐể tạo hiệu ứng này, cần có ba thứ. thay đổi màu nền hiện tại của nút, thêm đường viền hoặc đường viền cho chế độ di chuột và thay đổi màu của văn bản Vì vậy, nếu bạn có nút màu đen và muốn chuyển sang nút màu trắng có viền đen, bạn sẽ cần thêm .medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium:hover { background-color: transparent; border: 2px solid #000000; color: #000000; } Nếu bạn thắc mắc tại sao trong suốt thay vì màu trắng, thì đó là trong trường hợp bạn quyết định thêm nút của mình vào nền màu Về phần viền, bạn có thể thay đổi độ dày 2px tùy thích (1px, 3px. ) và thêm mã hex màu tương ứng của bạn trong đó #000000 là Màu của phông chữ thay đổi nhờ thuộc tính color, trong đó #000000 có thể được thay thế bằng màu bạn chọn Bây giờ, bạn có thể nhận thấy có một chút sai lệch khi thực hiện thay đổi này trên nút đồng màu. Nếu bạn nhìn kỹ, bạn có thể thấy văn bản di chuyển một chút và nút dường như mở rộng kích thước, do đó làm cho nội dung di chuyển xuống một chút DI TRÊN TÔI Điều này là do bạn đang thêm đường viền vào chế độ di chuột của một nút không có bất kỳ nút nào, do đó ảnh hưởng đến kích thước ban đầu bằng một vài pixel. Tuy nhiên, một cách nhanh chóng để giải quyết vấn đề này là thêm đường viền vào chế độ nút bình thường (không có. hover lớp giả) .medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium { border: 2px solid #000000; }
Chỉ cần đảm bảo kích thước pixel khớp với kích thước bạn sẽ thêm trong chế độ di chuột và làm cho màu trong suốt hoặc khớp với màu của nút (trong trường hợp này, nó cũng sẽ có màu đen) DI TRÊN TÔI
Làm thế nào về điều đó? Cho đến lần sau, Mã đầy đủ/*SOLID TO SOLID*/ .medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium:hover { background-color: #009999; } ________số 8_______ khối nút Beatriz Caraballo Chào. tôi là B Tôi tự nhận mình là một người đam mê tùy chỉnh Squarespace chuyên giúp đỡ các nhà thiết kế đồng nghiệp tăng tốc quy trình làm việc của họ, phát triển kỹ năng viết mã của họ và tận hưởng cảm giác tuyệt vời khi viết mã Làm cách nào để thêm hiệu ứng di chuột vào nút HTML?Các bước triển khai hiệu ứng di chuột . Tạo trang web của bạn Thêm nút hành động lớn màu xanh của bạn ngay bên dưới phần tử h1 Tạo kiểu cho nút lớn của bạn bằng cách thêm biểu định kiểu. . Xác định và chọn phần tử sẽ kích hoạt hiệu ứng di chuột. . Tạo kiểu cho nút của bạn Làm cách nào để thay đổi màu nút khi di chuột qua trong javascript? . chức năng ChangeColor() tài liệu. getElementById('btn1'). Phong cách. nềnColor = 'Đỏ'; setTimeout("ChangeColor2()", 2000); hàm ChangeColor2() Làm cách nào để nút thay đổi màu trên bootstrap di chuột?Màu di chuột của nút chính Bootstrap
. target the . btn-primary trong tệp CSS của bạn. Bất kỳ kiểu dáng nào bạn thêm (tôi. e. color, background-color, và border-color) sẽ ghi đè kiểu bootstrap mặc định cho btn-primary. |
