Thiết kế nút trực quan và nhận HTML cùng CSS để sử dụng trên trang web của bạn. Bắt đầu với một mẫu có sẵn, điều chỉnh kiểu chữ, màu sắc, hình dạng và đổ bóng, sau đó xem trước các trạng thái tương tác trước khi xuất.
Duyệt qua các mẫu 44 trong các bộ sưu tập Everyday, Classic, Shaped, Expressive, Gradients và Elite. Mỗi mẫu là một điểm bắt đầu mà bạn có thể chỉnh sửa.
Cách các mẫu ảnh hưởng đến thiết kế của bạn
Chọn trước, tinh chỉnh sau
Sử dụng bộ sưu tập Style để thu hẹp thư viện. Việc áp dụng một mẫu sẽ thay thế cả kiểu mặc định và kiểu khi di chuột, trong khi vẫn giữ nguyên văn bản nút và tên lớp của bạn.
Hãy thử một lớp nền đặc đơn giản, góc bo tròn, đường viền sắc nét hoặc một kiểu trang trí bắt mắt hơn. Khi đã tìm được hướng đi, hãy sử dụng các tab khác để điều chỉnh các chi tiết cho phù hợp với trang của bạn.
Làm cho nhãn nút trở nên phù hợp
Thiết lập văn bản nút, phông chữ, kích thước, độ đậm, khoảng cách, chiều cao dòng, căn lề và màu chữ. Xem nhãn cập nhật ngay khi bạn làm việc.
Tinh chỉnh văn bản và khoảng cách
Kiểu chữ phù hợp với hành động
Văn bản chứa các công cụ điều khiển phông chữ và trường văn bản Nút thứ hai. Kích thước phông chữ chạy từ 10 đến 80 px; các họ phông chữ được liệt kê sử dụng phông chữ có sẵn trên thiết bị của người dùng.
Sử dụng nhãn ngắn gọn mô tả hành động. Trong phần Fill, khoảng đệm ngang và dọc giúp tạo không gian xung quanh mà không làm thay đổi kích thước chữ. Kiểm tra các nhãn dài hơn trên trang nơi nút sẽ được sử dụng.
Chọn màu nền đặc hoặc màu chuyển sắc
Sử dụng một màu nền hoặc pha trộn hai màu với dải màu tuyến tính. Bộ chọn màu và nhập mã hex cho phép bạn làm việc trực quan hoặc chính xác.
Thiết lập màu sắc và hướng chuyển sắc
Hai màu, một hướng rõ ràng
Trong phần Fill, thay đổi kiểu Fill thành Linear gradient để hiển thị Second color và Gradient angle. Góc chạy từ 0 đến 360 độ.
Các trường Hex chấp nhận mã màu đầy đủ sáu chữ số hoặc viết tắt ba chữ số. Kiểm tra nhãn màu trắng hoặc màu trên cả hai đầu của dải màu; studio không tự động chứng nhận độ tương phản văn bản.
Kiểm soát đường viền và độ sâu
Điều chỉnh các góc liên kết hoặc độc lập, độ rộng và kiểu đường viền, đổ bóng hộp và đổ bóng văn bản. Tạo cho nút một hình dạng phù hợp với ngữ cảnh của nó.
Khám phá các góc, đường viền và đổ bóng
Từ hình chữ nhật sắc nét đến hình viên thuốc mềm mại
Trong phần Shape, giữ Link all corners để có bán kính chung, hoặc tắt nó đi để thiết lập từng góc. Các kiểu đường viền bao gồm solid, dashed, dotted, double, inset, outset, ridge, groove và none.
Trong phần Shadow, thiết lập độ lệch ngang và dọc, độ mờ, màu sắc và độ trong suốt. Đổ bóng hộp cũng có độ lan tỏa và công tắc inset. Đổ bóng văn bản là riêng biệt, vì vậy bạn có thể thêm độ sâu cho nhãn mà không làm thay đổi đường viền nút.
Thiết kế cả tương tác
Chỉnh sửa kiểu Default và Hover riêng biệt. Xem trước giao diện Default, Hover và Active, sau đó so sánh nút trên nền sáng và tối.
Hiểu về các trạng thái chỉnh sửa và xem trước
Hai kiểu có thể chỉnh sửa, ba trạng thái xem trước
Trạng thái chỉnh sửa chọn kiểu mà các công cụ của bạn thay đổi. Các nút trạng thái canvas chỉ chọn bản xem trước. Di chuột hoặc nhấn vào bản xem trước cũng hiển thị tương tác của nó.
Các giá trị Hover vẫn khớp với mặc định sẽ tuân theo các chỉnh sửa cơ sở cho đến khi được tùy chỉnh. CSS được xuất bao gồm quy tắc hover khi cần, đường viền focus-visible, chuyển động active và quy tắc giảm chuyển động.
Đưa CSS vào dự án của bạn
Sao chép CSS đã tạo và nút HTML tương ứng, hoặc tải xuống tệp kiểu. Tên lớp giữ cho hai phần được kết nối.
Sao chép, tải xuống và lưu giữ công việc của bạn
Mã thuần túy bạn có thể sử dụng trực tiếp
Chọn một tên lớp đặc biệt, sao chép CSS từ tab của nó, sau đó sao chép nút từ HTML. Tải xuống sẽ lưu tệp .css được đặt tên theo lớp; nó không tải xuống toàn bộ trang web.
Xem trước và tạo mã chạy trong trình duyệt của bạn. Studio cố gắng ghi nhớ một bản nháp trong bộ nhớ cục bộ của trình duyệt này; hãy xuất bất cứ thứ gì bạn muốn giữ lại. Reset đưa studio trở về kiểu ban đầu.
Văn bản và kiểu dáng vào. HTML và CSS ra.
Không cần tải lên. JavaScript cung cấp năng lượng cho trình chỉnh sửa trực tiếp trong trình duyệt của bạn. Sao chép HTML và CSS riêng biệt, hoặc tải xuống tệp kiểu CSS. Ngăn xếp phông chữ được tạo sử dụng các phông chữ có sẵn trên thiết bị của người xem.
