Nút bấm Ảo (Ghost Button) - xu hướng thiết kế web hiện đại (P.1)

Dưới đây chúng tôi xin giới thiệu một loạt ví dụ tiêu biểu về việc đưa các nút bấm ảo một cách thành công để các bạn tham khảo cho trang web của bạn:

The Offshore Partners

The Offshore Parners sử dụng tông màu tối bao trùm toàn bộ thiet ke web của mình. Phần màu tối này chủ yếu toát ra từ bức ảnh nền toàn trang của nó. Trên nền trang xuất hiện 3 nút bấm ảo, 2 nút bấm dẫn đến một trang con khác và một nút bấm chính là hamburger menu.  

Visage

Visage sử dụng nút bấm trong suốt đầy sáng tạo xuyên suốt website của mình. Nút  ‘Contact Us’ chuyển sang màu xanh giống như nút ‘Request Private Beta Access’ khi bạn di chuột qua. Nút bấm ‘Beta Login’ ở trên đầu trang web thì chỉ có phần chữ chuyển màu xanh khi di chuột qua.  Nhìn bên ngoài thì thiết kế có vẻ đơn giản, nhưng nó ẩn chứa nhiều hiệu ứng thú vị nho nhỏ cho người dùng mỗi khi di chuyển con chuột của mình qua một vị trí nào đó. 

Alice

Nút bấm trong suốt xuất hiện trên nền màu rực rỡ của thiết kế web này. Nếu bạn chọn giới tính là Nữ thì nền web chuyển sang màu hồng cam, còn nếu bạn chọn nút bấm ảo có ghi là Nam thì màu website chuyển sang màu xanh. Website mang đến trải nghiệm thú vị cho người dùng trước khi đưa họ đến với nội dung chính mà trang web muốn quảng quá. 

The Distance

Hãng sở hữu website này sử dụng các màu xanh lá, xanh dương và hồng cho website của mình. Riêng nút bấm hamburger của họ là sự kết hợp của 3 màu sắc nổi bật, bạn sẽ không thể không chú ý tới nó. 

Iuvo

Đây là một ví dụ điển hình của việc sử dụng ghost button. Khi bạn di chuột vào nút bấm, một nhãn hiệu sẽ xuất hiện phía trên nút bấm đó. Bạn có thể gọi đó là ‘ghost icons’ hay icon ảo nếu muốn.

Chilli

Trang web có thiết kế đẹp mắt này là sự tổng hòa của nhiều xu hướng hiết kế hiện đại. Ở phần landing page, bạn sẽ thấy xuất hiện nút bấm ảo với phần chữ xám trên nền trắng. Màu sắc của nút bấm sẽ thay đổi khi bạn di chuột vào. Còn nếu không, mọi thứ sẽ giữ màu sắc đen trắng và tạo phong cách đơn giản cho toàn bộ trang web này. 

Future Father

Đây cũng là một ví dụ đẹp mắt nữa của nút bấm ảo. Khu vực nút bấm nổi trội với màu sắc đậm đà hơn hẳn phần nền, mặc dù ai cũng sẽ chú ý đến phần Typography to và rõ ràng ở bên trái trước tiên. Một điều nữa cần nói là khoảng trắng xung quanh nút bấm đã được tận dụng vừa để làm gọn gàng website, vừa để tôn vinh phần nút bấm đó lên. 

Risotteria Melotti

Trang web này sử dụng video toàn trang cho landing page của mình. Nút ‘Play’ là một nút bấm ảo và nó sẽ không hiện hết màu sắc thực của mình nếu bạn không di chuột vào đó. Nút bấm hamburger ở bên trái và một icon ở bên phải cũng có hiệu ứng giống y như vậy. 

Toga Apartments

Toga có cách sử dụng nút bấm ảo hơi khác biệt. Một chiếc hộp lớn được chi thành các khu vực riêng và chứa các nút ghost button. Dòng chữ‘View Property Detail’  chuyển sang màu tối nhẹ khi di chuột vào, khi ấn vào đó, nó sẽ dần bạn đến nội dung chính của website. 

Moodsoup

Thiết kế website của công ty này sử dụng một ghost button trên nền gradient bắt mắt. Màu trắng là lựa chọn hợp lý cho nút bấm này để giúp nó nổi bật trên nền đó. 

The Grid

Ở phần landing page có 2 nút bấm ảo với hiệu ứng nhỏ thú vị khi bạn di chuột vào. 

Obvious Ventures

Bức ảnh nền đã được phủ một lớp màu hơi mờ ảo để tạo hiệu ứng cần thiết cho phần nền. Nút bấm nhỏ nhắn ‘Next’ nằm khiêm tốn trên nền website trắng sáng đó sẽ chuyển màu khi bạn di chuột vào. Công ty này còn đặt tên của mình vào một hộp trông giống một nút bấm ảo khác ở phía trên bên trái website. Toàn trang web trông khá thanh lịch và tinh tế với các bố trí và hiệu ứng hình ảnh như vậy.