11 ví dụ điển hình về cách dùng nút bấm Ghost

Là một phần của xu hướng thiết website chuyên nghiệp nở rộ từ năm 2014, các nút bấm ảo (ghost button) đã có tác động đến cả những người làm thiết kế lẫn người dùng web. 

Về cơ bản đó là những nút bấm đặt trên mặt bằng trong suốt, trên có một số từ ngữ (kiểu sans serif) để thúc đẩy người ta ấn vào nút đó. Nguồn gốc sơ khai của các nút bẩm theo phong cách này vẫn chưa rõ ràng nhưng giờ đây nó cũng không quan trọng nữa. Một điều thú vị là mặc dù phần lớn cấu tạo của nó là trong suốt (như Ma = Ghost), đáng lẽ người ta sẽ không thể chú ý đến nó, nhưng thực tế là đây lại là cách làm nút call to action rất hiệu quả. Nhờ vào sự tối giản trong diện mạo, các nút bấm ảo đã góp phần tạo nên thiết kế website đẹp mắt mà lại có khả năng thu hút cao.

Là một chuyên gia thiết kế, bạn chắc chắn sẽ muốn tận dụng tối đa những thành phần thiết kế mang lại trải nghiệm người dùng tốt nhất. Nếu bạn thích thú với việc sử dụng nút bấm ảo thì hãy cùng chúng tôi khám phá một số ví dụ sau để mở mang thêm cách sử dụng mới của nút bấm ảo: 

1. nois3

Tại sao thiết kế này lại có hiệu quả: cách bố trí các thành phần khiến người xem nhìn từ trái sang phải và dừng ở nút bấm ảo bên tai phải, rất thuận chiều nhìn và kích thích việc bấm nút. 

2. Themes Kingdom

Themes Kingdom sử dụng gallery năng động để trình bày hàng ngàn WordPress theme có sẵn cho bạn tải về. Với mỗi slide trên gallery, có 2 nút bấm ảo, trong đó một cái cho phép người xem tìm them chủng loại cụ thể, một nút để bạn xem tất cả theme.

3. VERBAL+VISUAL

Phần ảnh nền được phủ một lớp màu tối, cho phép làm nổi bật phần chữ và nút bấm ảo trên đó, gây ấn tượng tốt với người xem. Nó cũng có tác dụng kích thích trí tò mò của người xem và khiến họ muốn bấm vào nút để tìm hiểu thêm. 

4. Throne Watches

Không giống hầu hết các website sử dụng bộ lọc cho ảnh nền để làm nổi nút bấm ảo, Throne Watches sử dụng bức ảnh có độ phân giải cao của sản phẩm để làm nền trang. Mục đích là để chính hình ảnh nói thay lời quảng cáo. 

5. jaspurnl

Màu sắc viền ngoài của nút bấm có sự khác biệt với màu nền, khiến cho nó nổi bật hơn. Thiết kế webiste tối giản sử dụng nhiều khoảng trống, giúp cho nút bấm ảo có không gian riêng để tỏa sáng. 

6. GUILLAUME MARQ

Có 3 nút bấm ảo trên trang này: My Resume, Contact Me, Hire Me. Nút bấm quan trọng nhất chắc chắn được đặt ở vị trí dễ nhìn nhất. 

7. Dribbbox

Nút bấm Live demo có sự tương phản với nút bấm đặc Download. Thêm một chi tiết nữa là hình mũi tên ở 2 nút bấm có chiều ngược nhau, cho phép người dùng hiểu được ý nghĩa của nút bấm chỉ bẳng hình ảnh.

8. The Distance

Ảnh nền lấy cảm hứng từ bar đêm với bức tường gạch và đèn LED tạo hình tên website. Các nút bám ảo nằm trong các đường viền trông giống như đèn neon nhiều màu. 

9. NZK

Hiệu ứng bộ lọc ảnh nền một lần nữa xuất hiện, tạo sự tương phản giữa chữ trắng, nút bấm ảo và nền. 

10. Ric-hard Outram

Icon trong nút bấm ảo này chỉ xuống dưới, có nghĩa là khuyến khích người xem cuộn trang xuống để xem các dịch vụ của trang web này. 

11. HARBR

Các kiểu chữ khác nhau được sử dụng để giúp truyền tải thông điệp mạnh mẽ hơn. Nút bấm ảo nằm chính giữa trang khiến người xem không thể nào bỏ qua nó. 

Một số lưu ý

• Vị trí của nút bấm ảo khá quan trọng với việc phát huy tác dụng, đặt chúng ở chính giữa là cách gây chú ý nhất
• Không đặt nút bấm ảo ở những chỗ có thể bị lấn át bởi ảnh nền
• Nút bấm ảo có thể phù hợp với website này những không phải là với mọi website khác, hãy cân nhắc hoàn cảnh để quyết định có dùng nó hay không