# 038: Thêm Hoa Nút - Thủ thuật CSS

Anonim

Chúng tôi đã tạo ra giao diện của một nút ở trạng thái bình thường, nhưng một nút 3D như vậy đang cầu xin trạng thái “được đẩy”. Những gì chúng tôi làm là thêm màu đậm hơn vào nút bật :hover:focus. Sau đó, đối với :active(được đẩy), chúng tôi loại bỏ một số box-shadows và di chuyển nó xuống và sang phải với vị trí tương đối. Nó đơn giản như vậy, nút bây giờ có trải nghiệm thực sự rõ ràng và hài lòng khi bạn nhấp vào nó.

Một điều cần lưu ý: khi bạn điều chỉnh vị trí tương đối với các giá trị trên / trái / dưới / phải như vậy, bạn phải cẩn thận trong tương lai nếu bạn cần định vị tuyệt đối phần tử. Bạn có thể nhận được một số bước nhảy điên cuồng đang diễn ra, vì trên / trái / dưới / phải có nghĩa là một cái gì đó khác xa với định vị tuyệt đối so với định vị tương đối.