Trình Tạo Nút Vàng CSS

Công Cụ Này Là Gì?

Công cụ này áp dụng một gradient tuyến tính ba điểm dừng dựng sẵn cho mỗi kiểu kim loại, được tinh chỉnh để trông giống ánh sáng phản chiếu trên bề mặt kim loại đánh bóng.

Chuyển đổi giữa Vàng, Bạc, Đồng, và Vàng Hồng bằng bộ chọn kiểu, mỗi kiểu có gradient, màu chữ, và bóng đổ riêng được tinh chỉnh phù hợp với kim loại đó.

Bản xem trước trực tiếp cập nhật ngay khi bạn gõ văn bản trên nút, đổi kiểu, hoặc điều chỉnh bán kính góc, giúp bạn thấy chính xác nút sẽ trông ra sao trước khi sao chép CSS.

Tại Sao Nên Dùng?

• Bạn làm landing page cho thương hiệu mỹ phẩm nội địa có hạng "Thành viên Vàng" với ưu đãi riêng — tạo nút Vàng ở đây cho CTA "Tham gia Thành viên Vàng" để trông sang trọng hơn hẳn nút xanh thông thường.
• Bạn phát triển trang bảng giá cho SaaS trong nước với ba gói đăng ký và muốn gói đắt nhất nổi bật nhất về mặt thị giác — dùng kiểu Vàng Hồng cho gói đó để thu hút chú ý mà không cần thêm huy hiệu.
• Cửa hàng online của bạn bán đồ hiệu đã qua sử dụng và muốn nút "Mua Ngay" cho danh mục hàng độc quyền trông khác biệt so với danh mục thường — thử kiểu Bạc để tạo cảm giác sang trọng trung tính hơn vàng.
• Bạn làm chứng chỉ số hoặc huy hiệu điện tử cho học viên khóa học online và muốn phần "Đã Chứng Nhận" trông như huy chương kim loại thật — kiểu Đồng phù hợp để tạo cảm giác thành tích chắc chắn, đẳng cấp.
• Khách hàng freelance của bạn bán đồ thủ công cao cấp và yêu cầu phần "Mua Phiên Bản Giới Hạn" trông sang trọng mà không thêm ảnh nặng làm chậm trang — CSS thuần từ công cụ này nhẹ mà vẫn trông kim loại thật.
• Bạn đang làm trang bảng xếp hạng game hoặc cộng đồng và muốn nút "Nhận Thưởng" cho top 3 người thắng trông khác nhau theo thứ hạng — kết hợp Vàng cho hạng nhất, Bạc cho hạng nhì, Đồng cho hạng ba.

Cách Sử Dụng

1. Nhập văn bản cho nút của bạn.
2. Chọn một kiểu kim loại — Vàng, Bạc, Đồng, hoặc Vàng Hồng.
3. Điều chỉnh thanh trượt bán kính viền để phù hợp với kiểu góc trong thiết kế của bạn.
4. Nhấn "Copy" để sao chép mã CSS đã tạo và dán vào stylesheet của bạn.

Ví dụ

Đầu vào

Text: "Buy Now", Style: Gold, Radius: 8

Đầu ra

background: linear-gradient(180deg, #f9e28c 0%, #d4a017 50%, #f9e28c 100%);
color: #5c3d00;
border: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(212,160,23,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
padding: 12px 32px;
font-weight: 600;
cursor: pointer;

Mã CSS được tạo ra kết hợp một gradient kim loại ba điểm dừng, màu chữ và bóng đổ tương ứng, cùng khoảng đệm nút tiêu chuẩn để tạo thành một khối kiểu dáng sẵn sàng sử dụng.

Tổng quan các kiểu kim loại

Mỗi kiểu kim loại sử dụng gradient, màu chữ, và màu bóng đổ được tinh chỉnh riêng.

Công cụ liên quan

Để có thêm các công cụ tạo CSS, hãy thử những công cụ sau.

→ Trình Tạo Chữ Neon · Trình Tạo Chữ Nổi/Chìm CSS · Trình Tạo Bán Kính Viền

Chọn kiểu kim loại phù hợp theo ngữ cảnh kinh doanh

Vàng phù hợp nhất cho ngữ cảnh muốn tạo cảm giác sang trọng và thúc giục hành động ngay — nút thanh toán, khuyến mãi giới hạn, hoặc hạng thành viên cao nhất. Màu sắc ấm và bắt mắt ngay lập tức, nhưng nếu dùng quá nhiều trên cùng một trang có thể gây rối mắt.

Bạc phù hợp cho ngữ cảnh muốn trung tính và chuyên nghiệp mà vẫn giữ cảm giác cao cấp — thích hợp cho nút phụ, gói tầm trung trên trang bảng giá, hoặc thương hiệu theo phong cách hiện đại tối giản thay vì sang trọng truyền thống.

Đồng và Vàng Hồng phù hợp cho ngữ cảnh cụ thể hơn — Đồng tạo cảm giác vững chắc và thành tích (hợp cho huy hiệu hoặc bảng xếp hạng), trong khi Vàng Hồng tạo cảm giác nhẹ nhàng, nữ tính, phù hợp cho thương hiệu làm đẹp hoặc lifestyle nhắm đến nhóm khách hàng cụ thể.

Câu Hỏi Thường Gặp