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

Thứ tư - 08/04/2015 00:08

Nút bấm ảo hay còn gọi là nút bấm trong suốt (Ghost button) là khái niệm đã trở nên phổ biến với dân thiết kế web. Nó đã xuất hiện nhiều trên các website hiện đại ngày nay và ngày càng phát huy tác dụng của mình.

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

Xu hướng thiet ke web ngày nay là sử dụng các bức ảnh nền hoặc video nền toàn trang hoặc khổ lớn, do đó các nút bấm trong suốt dạng này sẽ phát huy tác dụng trong việc không làm cản trở phần background của website. Hơn thế nữa, các nút bấm ảo còn làm cho trang web trở nên tinh tế và độc đáo hơn trong mắt người dùng web. 

Mặc dù cấu trúc của các nút bấm ảo rất đơn giản, nhưng không vì thế mà sự sáng tạo không được phát huy ở chi tiết nhỏ này. Màu sắc của phần viền và chữ trên nút bấm vẫn phải đảm bảo làm sao để nó trở nên nổi bật trên phần nền của website, khiến người xem không bỏ sót mất nút bấm nào. 

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.  

The Offshore Partners

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 đó. 

Visage

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á. 

Alice

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ó. 

The Distance

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.

Iuvo

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. 

Chilli

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. 

Future Father

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. 

Risotteria Melotti

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. 

Toga Apartments

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 đó. 

Moodsoup

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. 

The Grid

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. 

Obvious Ventures

Ngày nay thiết kế trang web là nhu cầu cần thiết để marketing trên internet nếu bạn không đứng sau đối thủ. Nhưng các dịch vụ thiết kế web giá rẻ tphcm không thể có được chất lượng như ý muốn, nếu bạn tự học thiết kế trang web bạn cũng có thể làm được những trang web như ý. Hãy tìm một đơn vị thực sự uy tín và có thời gian hoạt động trên thị trường để có những dịch vụ tốt nhất. Chúc bạn thành công.

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: Ngôi Sao Số Web & Brand Solutions