Ví dụ này chỉ sử dụng các điều khiển của trình tạo. Các hình ảnh trên hiển thị các biểu định kiểu đã tải xuống thực tế được áp dụng cho các nút HTML thông thường, không phải ảnh chụp màn hình của trình chỉnh sửa.
Bắt đầu với Signature
Mở Trình tạo nút CSS. Trong phần Cài đặt sẵn (Presets), chọn Signature từ bộ sưu tập Everyday. Đặt văn bản nút thành “Get started”. Trong vùng mã, đặt Tên lớp (Class name) thành cta-button.
Cài đặt sẵn thay thế các kiểu mặc định và di chuột, trong khi nhãn và tên lớp của bạn vẫn được giữ nguyên. Hãy chọn điểm bắt đầu trước khi thực hiện các điều chỉnh chi tiết.
Tên lớp kết nối các quy tắc CSS với nút HTML của bạn. Trình tạo sẽ làm sạch các ký tự không được hỗ trợ; hãy sử dụng một tên ngắn gọn, đặc trưng để tránh tạo kiểu cho các phần tử không liên quan.
Tạo nút dạng viên thuốc gradient
Giữ trạng thái Chỉnh sửa (Editing) ở Mặc định (Default). Trong phần Văn bản (Text), chọn System sans, Cỡ chữ 18 px và Độ đậm Bold. Giữ màu văn bản trắng, kiểu bình thường, căn giữa và chiều cao dòng 1.4.
Trong phần Tô màu (Fill), chọn Linear gradient. Sử dụng hai màu và góc bên dưới. Đặt khoảng đệm ngang thành 32 px và khoảng đệm dọc thành 16 px. Trong phần Hình dạng (Shape), giữ bật Liên kết tất cả các góc và đặt Bán kính góc thành 100 px. Độ rộng đường viền giữ nguyên 0 px.
Trong phần Đổ bóng (Shadow), giữ bật Đổ bóng hộp (Box shadow). Sử dụng độ lệch ngang 0 px, độ lệch dọc 8 px, độ mờ 24 px, độ lan tỏa −4 px, màu #460BD8 và độ trong suốt 32%. Để trống Đổ bóng trong (Inset shadow) và Đổ bóng văn bản (Text shadow).
Khoảng đệm thay đổi không gian xung quanh văn bản. Bán kính góc thay đổi đường viền. Bán kính lớn tạo ra hình dạng viên thuốc này mà không làm nhãn rộng hơn.
Tạo xử lý riêng cho trạng thái di chuột
Chuyển trạng thái Chỉnh sửa sang Di chuột (Hover). Trong phần Tô màu, thay đổi Màu nền thành #33099E và Màu thứ hai thành #6D20BF. Giữ góc gradient ở 135°. Trong phần Đổ bóng, thay đổi Độ lệch dọc thành 10 px và Độ mờ thành 28 px. Để nguyên các cài đặt khác.
Sử dụng các nút Mặc định, Di chuột và Nhấn trên khung vẽ để kiểm tra từng trạng thái. Bạn cũng có thể di chuột qua hoặc nhấn vào nút xem trước. Thay đổi khung vẽ giữa sáng và tối để xem xét cạnh và bóng của nó.
Trạng thái chỉnh sửa chọn kiểu bạn thay đổi. Trạng thái khung vẽ chỉ thay đổi những gì bạn xem trước. Quay lại Chỉnh sửa mặc định trước khi điều chỉnh giao diện nghỉ.
Các thuộc tính di chuột vẫn khớp với mặc định sẽ tuân theo các chỉnh sửa mặc định sau này. Khi bạn tùy chỉnh một thuộc tính di chuột, nó sẽ giữ độc lập. Kiểm tra lại cả hai trạng thái sau khi thay đổi kiểu cơ bản.
Xuất và kiểm tra trên trang của bạn
Chọn tab CSS và sử dụng Sao chép CSS, hoặc chọn Tải xuống để lưu cta-button.css. Chọn tab HTML và sao chép mã đánh dấu nút tương ứng. HTML bao gồm cùng tên lớp và một nút với type="button".
Thêm CSS vào biểu định kiểu của bạn hoặc liên kết tệp đã tải xuống từ trang của bạn. Đặt HTML vào nơi nút thuộc về. Hai tệp xuất hoạt động cùng nhau: một nút HTML đơn lẻ không bao gồm kiểu dáng của nó.
Mở trang và kiểm tra các trạng thái mặc định, di chuột, tiêu điểm bàn phím và trạng thái nhấn. Tệp xuất bao gồm đường viền focus-visible, chuyển động nhấn nhỏ và quy tắc giảm chuyển động. Các kiểu xung quanh và phông chữ đã cài đặt của bạn vẫn có thể ảnh hưởng đến kết quả.
Nút được tạo là một điều khiển có kiểu dáng. Kết nối hành vi nhấp chuột của nó trong dự án của bạn; sử dụng loại nút chính xác khi thêm nó vào biểu mẫu.
cta-button.css
Tên tệp đã tải xuống tuân theo tên lớp.
Câu hỏi thường gặp
Tôi có cần khung CSS không?
Không. Đầu ra là CSS tiêu chuẩn cộng với một nút HTML đơn giản. Dán CSS vào biểu định kiểu của riêng bạn và sử dụng lớp tương ứng trên nút.
Tải xuống có lưu cả HTML không?
Tải xuống lưu tệp .css được đặt tên theo lớp. Sao chép mã đánh dấu nút riêng biệt từ tab HTML.
Tôi có thể đặt mỗi góc một bán kính khác nhau không?
Có. Trong phần Hình dạng, tắt Liên kết tất cả các góc, sau đó đặt Góc trên bên trái, Góc trên bên phải, Góc dưới bên phải và Góc dưới bên trái một cách độc lập. Ví dụ này giữ chúng liên kết để tạo hình dạng viên thuốc.
Thiết kế của tôi có còn ở đây vào lần tới không?
Studio cố gắng lưu bản nháp hiện tại vào bộ nhớ cục bộ của trình duyệt này. Đây không phải là tài khoản hay bản sao lưu trên nhiều thiết bị. Cài đặt trình duyệt, xóa dữ liệu trang web hoặc Đặt lại có thể xóa hoặc thay thế nó, vì vậy hãy xuất công việc bạn muốn giữ lại.
Nút của tôi có được tải lên máy chủ không?
Bản xem trước kiểu dáng và quá trình tạo CSS/HTML chạy trong trình duyệt của bạn. Trình chỉnh sửa không tải văn bản nút hoặc bản nháp kiểu dáng của bạn lên để tạo tệp xuất.
Tạo phong cách riêng cho nút tiếp theo của bạn.
Chọn điểm bắt đầu, điều chỉnh các chi tiết và đưa mã vào dự án của bạn.