Thông tin cơ bản
Nội dung button:
Tên class chèn CSS:
Font mặc định:
Kiểu Button:
Đậm Nghiêng Nghiêng
Màu sắc:
Đường viền và kích thước button
Bo góc:
Trên - bên trái Trên - bên phải Dưới - bên trái Dưới - bên phải
Dưới - bên trái Dưới - bên phải
Tùy chỉnh kích thước bo góc:
Vị trí văn bản:
Kích thước font:
Kích thước đường viền:
Chiều rộng Button
Chiều cao Button
Đổ bóng button
Đổ bóng Thêm Inset Thêm Inset
Khoảng cách đổ bóng trên/dưới:
Khoảng cách đổ bóng trái/phải:
Đổ bóng biên:
Đổ bóng button:
Đổ bóng chữ
Đổ bóng chữ
Vị trí bóng so với văn bản [Trên/dưới]:
Vị trí bóng so với văn bản [Trái/phải]:
Đổ bóng bóng chữ:
Mục lục
- Thiết kế nút tốt và nút xấu
- Thiết kế nút tốt
- Thiết kế nút xấu
- Ý tưởng thiết kế nút
- Vecteezy
- Freepik
- Cách tạo nút website
- Thiết kế nút ứng dụng CSS
- Nút màu
- Góc tròn
- Biên giới màu sắc
- Nút di chuyển
- Nút bóng tối
- Nút vô hiệu hoá
- Website Button Maker
- Nút Website miễn phí
- Đường dưới nút nút
Những ấn tượng đầu tiên quan trọng. Người dùng hầu như ngay lập tức tạo ra một ý kiến chung trên trang của bạn khi họ đến nên đáng để chắc chắn rằng mọi khía cạnh của trang web của bạn hoạt động cùng nhau,
Nút là một yếu tố nền quan trọng, tuỳ biến, trong sáng, súc tích, và lựa chọn thiết kế nút ngữ cảnh có thể giúp trang phục và gây ấn tượng với trang web của bạn để đạt được thành công.
Lưu ý của biên tập viên : Bài viết này ban đầu được xuất bản vào tháng 5 năm 2020 và đã được cập nhật về độ toàn diện.
Mục lục
Thiết kế nút tốt và nút xấu
Thiết kế nút tốt
- Thiết kế nút xấu
- Ý tưởng thiết kế nút
- Vecteezy
Thiết kế nút xấu
- Not Responsive : Trong thiết kế web, trải nghiệm di động lên ngôi tối cao. Rất có thể bạn sẽ thiết kế các nút trên máy tính để bàn, vì vậy, bạn phải thủ công kiểm tra gấp đôi rằng các nút của bạn xuất hiện đúng trên thiết bị di động, cũng như thế. Nếu bạn không thực hiện bước này, các nút của bạn có thể quá lớn hoặc quá nhỏ so với màn hình di động có thể ảnh hưởng đáng kể đến tốc độ nhấp chuột của bạn. Thật may mắn, hầu hết công cụ CMS đều có nút chuyển đổi cung cấp cho bạn xem trước các yếu tố trang web trên nhiều kiểu màn hình để bạn có thể điều chỉnh thiết kế nút tương ứng
- Không có màu sắc : Các nút sáng, đậm rất tốt cho CTA vì chúng hướng dẫn du khách đến các yếu tố chính trên trang. Nhớ rằng, trang web của bạn là một hành trình, và các nút bạn đặt trên nó sẽ hoạt động như một bản đồ. Không có nút màu đầy đủ, độc giả có thể gặp khó khăn trong việc thực hiện nó trên trang và chuyển đổi
- Nhầm chỗ : Trong một thông báo tương tự, các nút nhầm chỗ cũng có thể làm nhầm lẫn người đến thăm. Nếu các nút của bạn không được đặt trong một khu vực đặt người đọc để học thêm hoặc thực hiện mua, nút đơn độc ở giữa đoạn văn sẽ giúp ích và thực sự khiến vấn đề trở nên tồi tệ hơn. Giữ mọi thứ đơn giản bằng cách chỉ thêm các nút ở nơi bạn cần người đến để hành động. Một số ví dụ về những khu vực này bao gồm : gần phần tính năng và lợi ích, trong tiêu đề của trang và ở cuối trang
Ý tưởng thiết kế nút
Trước khi bắt đầu tạo ra nút riêng của mình, nó đáng giá để xem một vài mẫu miễn phí để có được một ý nghĩa về những gì ngoài kia, cái gì phù hợp với phong cách của anh?, và những gì hợp lý nhất cho trang web của bạn.
Vecteezy
Các nút miễn phí này rất đơn giản, thẳng đến điểm và có màu sắc sáng, giúp người dùng dễ dàng tìm kiếm những gì họ đang tìm kiếm và nhấp vào đó.
Nhà thiết kế cũng đã thêm các biểu tượng nhỏ để cải thiện bối cảnh ví dụ, nút Play Video có một ký hiệu Play nhỏ và nút tìm kiếm có kính lúp.
Freepik
Những nút này từ Freepik có chút sáng tạo hơn nhưng chắc chắn là đáng chú ý. Việc sử dụng màu hai màu giúp kéo người dùng vào, trong khi bổ sung các biểu tượng làm cho du khách dễ dàng tìm những gì họ đang tìm kiếm.
Ở đây, ngữ cảnh là vua, trong khi các chữ trên các nút không tác động đến tác động của chúng, văn bản chỉ là một trong ba dấu hiệu ngữ cảnh trên mỗi nút. Thông minh.
Cách tạo nút website
Điều gì xảy ra nếu bạn muốn thiết kế nút riêng của mình mặc dù các nút cơ bản phục vụ mục đích của chúng?, bạn cũng có thể chọn đào sâu hơn và thêm các hiệu ứng thú vị từ các nút thay đổi màu sắc khi bạn lướt qua chúng đến các nút có bóng tối, nút vô hiệu hoá, hoặc các nhóm nút.
Lựa chọn tốt nhất của bạn để xây dựng là thiết kế nút bấm bằng màu sắc. CSS là một công cụ định nghĩa và mô tả cách các yếu tố được hiển thị trong HTML. Sử dụng trình soạn thảo CSS, bạn có thể tuỳ biến mọi khía cạnh của trang web, từ header và footer đến các thanh bên và nút.
Bạn có thể thêm các điều kiện CSS vào bất kỳ trang web nào, nhưng các công cụ khác nhau đòi hỏi mức độ chuyên môn khác nhau. Nếu bạn mới bắt đầu, hãy đặt cược an toàn rằng công cụ này sẽ dễ dàng truy cập, thêm vào và điều chỉnh các cài đặt CSS và xây dựng các nút mới. Đây là cách.
Bước đầu tiên : Truy cập vào bảng điều khiển của Android và nhấp vào Appearance [ Hình ảnh ] > customize [ Tuỳ chỉnh ].
Nguồn ảnh.
Bước 2 : Tiếp theo, tiến đến cuối thanh bên trái và nhấp vào Additional CSS.
Nguồn ảnh.
Bước 2 : Tiếp theo, tiến đến cuối thanh bên trái và nhấp vào Additional CSS.
Nguồn ảnh.
Bước 2 : Tiếp theo, tiến đến cuối thanh bên trái và nhấp vào Additional CSS.
Trang trình soạn thảo CSS sẽ hiện ra và bạn có thể nhập bất kỳ mã CSS tuỳ chỉnh nào.
Bây giờ cô ở đây, cô nên thêm cái gì để tạo ra những nút tuyệt vời? phụ thuộc vào thứ cô đang tìm kiếm. Hãy tìm hiểu cách thay đổi tính năng nút của bạn.
Thiết kế nút ứng dụng CSS
Mã này tạo ra một nút xanh cơ bản mà người dùng có thể nhấp vào. Bạn sẽ thấy có một dòng HTML làm cho mã này hoạt động. Trong phần này, chúng tôi sẽ thảo luận về cách sử dụng CSS và HTML để chỉnh sửa và tuỳ biến nút đó dựa trên tuỳ chọn thiết kế nút của bạn.
Xem nút CSS của Pen Website bởi Christina Perricone [@ Hubspot ] trên CodePen.
Nút màu
Sử dụng đặc tính màu nền để thay đổi màu nền của nút.
Thấy nút bút màu của Christina Perricone [@ Hubspot ] trên CodePen.
Góc tròn
Các góc vuông luôn là lý tưởng. Sử dụng tính năng bán kính đường chéo để thay đổi bán kính đường chéo để làm tròn các góc của nút càng nhiều điểm số [ hoặc tỷ lệ phần trăm ], các góc càng tròn.
Thấy Pen Rounded Corners của Christina Perricone [@ Hubspot ] trên CodePen.
Hãy xem các đường biên màu bút của Christina Perricone [@ Hubspot ] trên CodePen.
Nút di chuyển
Sử dụng trình chọn :hover để thay đổi kiểu của nút khi người dùng di chuyển chuột qua nó. Sử dụng đặc tính thời gian chuyển tiếp để thay đổi cách hoạt động của hiệu ứng hover.
Xem nút Pen Hoverable của Christina Perricone [@ Hubspot ] trên CodePen.
Nút bóng tối
Sử dụng tính năng tạo bóng hộp để thêm bóng vào nút, lưu ý rằng mã HTML đã thay đổi một chút để hiển thị bóng đằng sau nút.
Xem nút Pen Shadow của Christina Perricone [@ Hubspot ] trên CodePen.
Nút vô hiệu hoá
Trong một số trường hợp, bạn cần vô hiệu hoá các nút. Sử dụng tính năng độ mờ để tăng độ trong cho nút tạo vẻ ngoài ” vô hiệu hoá “. Bạn cũng có thể thêm tính năng con trỏ với giá trị không được cho phép để hiển thị ” dấu hiệu không đỗ xe ” khi bạn nhấp chuột vào nút. Lưu ý rằng HTML đã thay đổi một chút để hiển thị các tính năng bị vô hiệu hoá của nút này.
Thấy nút Pen Disabled của Christina Perricone [@ Hubspot ] trên CodePen.
Website Button Maker
Đôi khi, dễ nhận được sự giúp đỡ hơn là tạo một nút bấm từ đầu. Với số lượng lớn các nút trên trang web của bạn và nhu cầu về phong cách và tính nhất quán, nó đáng giá để xem xét các công cụ có thể mở rộng để bạn tạo ra các nút và lặp lại trang web của bạn khi nó phát triển, Một số tính năng tuỳ biến tốt nhất để tìm kiếm trong trình tạo nút miễn phí hay trả phí là màu sắc, kích cỡ, đường viền, nền và văn bản. Các tính năng này sẽ cung cấp cho bạn sự kiểm soát cần thiết để tạo ra các nút trang web hoàn hảo.
1. Hubspot CMS
HubSpot CMS là cửa hàng dành riêng cho mọi thứ bạn cần để xây dựng những trang web tuyệt vời. Mua vé hàng tháng giúp bạn tiếp cận các trang thiết kế phù hợp với nhu cầu của mình và thu hút sự chú ý của du khách. Bạn có thể mở rộng công việc chăm chỉ hơn bằng cách kết nối trang web của bạn đến các giải pháp tiếp thị như HubSpots Marketing Hub để đảm bảo thiết kế của bạn được cung cấp theo thời gian, Chọn từ một loạt các mẫu và phong cách nút được thiết kế sẵn để có được vẻ ngoài hoàn hảo cho trang của bạn.
2. Wix
Wix là một nền tảng CMS trả lương làm cho thiết kế web dễ dàng hơn với các tính năng và chức năng đẹp và trực quan của trang web. Trong khi bạn không hoàn thành tuỳ biến nút với Wix, đây là điểm khởi đầu chắc chắn nếu anh cần rõ ràng, các tuỳ chọn ngữ cảnh hoạt động ngay bên ngoài khung.
Nút Website miễn phí
3. WordPress
Mã hoá CSS trong WordPress rất dễ dàng, và nền tảng website cũng đi kèm với một loạt các mẫu và plugin của trang web. Mặc dù các nút được thiết kế tuỳ chỉnh trong Windows yêu cầu nhiều công việc hơn, nhưng nó đáng để cân nhắc nếu bạn cảm thấy thoải mái với mã hoá cơ bản. Bởi vì Windows là nguồn mở, bạn có thể sử dụng miễn phí hoặc bạn có thể mua một kế hoạch Windows với chức năng cụ thể hơn.
4. Nhà tạo nút ứng dụng CSS tốt nhất
Best CSS Button Generator là một công cụ miễn phí cho phép bạn tuỳ biến vẻ ngoài của các nút trên website. Lựa chọn mọi thứ từ sắc độ chính xác của màu xanh lá cây trong bảng màu thương hiệu đến bóng đen đằng sau văn bản bên trong nút. Khi anh hoàn thành việc thiết kế. Chỉ cần nhấp vào nút Get Code để sao chép và dán mã CSS vào trường thêm của mình trên trang web.
5. Nhà tạo nút ứng dụng CSS
Một nền tảng tương tự khác, CSS Button Generator là một công cụ miễn phí, dễ dàng để tạo ra các nút CTA đẹp đẽ. Nó có tất cả các tính năng cơ bản mà người tạo nút nên có, nhưng điều làm cho cái này độc đáo là tính năng tuỳ biến lơ lửng. Điều đó có nghĩa là khi bạn sử dụng CSS Button Generator, các nút của bạn sẽ có chức năng năng năng động của các trang web chuyên nghiệp.
Đường dưới nút nút
Những ấn tượng đầu tiên quan trọng. Người dùng hầu như ngay lập tức tạo ra một ý kiến chung trên trang của bạn khi họ đến nên đáng để chắc chắn rằng mọi khía cạnh của trang web của bạn hoạt động cùng nhau,
Nút là một yếu tố nền quan trọng, tuỳ biến, trong sáng, súc tích, và lựa chọn thiết kế nút ngữ cảnh có thể giúp trang phục và gây ấn tượng với trang web của bạn để đạt được thành công.
Lưu ý của biên tập viên : Bài viết này ban đầu được xuất bản vào tháng 5 năm 2020 và đã được cập nhật về độ toàn diện.