Nút bấm Ảo (Ghost Button) - xu hướng thiết kế web hiện đại (P.1)
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.
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.
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.
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.
Nguồn tin: Ngôi Sao Số
Bạn đã xem chưa?
Đăng ký ngay công cụ SEO web hiệu quả, dễ dùng XOVI NOW
XOVI NOW SEO là một công cụ SEO toàn diện, cung cấp đầy đủ các tính năng cần thiết cho doanh nghiệp trong việc tối ưu hóa website và tăng thứ hạng trên công cụ tìm kiếm.
Chăm sóc trang web, điều nên làm ngay khi có web
Website là một phần quan trọng trong chiến lược kinh doanh trực tuyến của bất kỳ doanh nghiệp nào. Chăm sóc website là một trong những công việc quan trọng để đảm bảo website hoạt động ổn định, an toàn và hiệu quả.
Tạo email giá rẻ và hiệu quả: Khám phá giải pháp tiết kiệm chi phí.
Trong thời đại công nghệ phát triển nhanh chóng, việc có một địa chỉ email chuyên nghiệp trở nên quan trọng hơn bao giờ hết. Tuy nhiên, không phải ai cũng muốn đầu tư một số tiền lớn để có một dịch vụ email chất lượng.