A small button plays a very important role in a Web page, it leads us from one page to another page, is a powerful bridge when we visit the website. A good bridge not only can bring a comfortable transition for users, but may also add a lot of points to your website. Anyforweb, in its 15 trends in global web design in the 2014, said that the flat and minimalist design style was the latest trend in design. Imagine, if these two kinds of hot design concepts together to the small Web site button design, what will show the effect?
Transparent button Design in fact, in foreign web design very early appeared, but also by foreign designers are playful called "ghost button" (Ghost Buttons). When it comes to ghosts, our first impression is thin and transparent, which is exactly what the Phantom button is all about. No background and texture rendering, only one layer of simple to the extreme line frame and the outside division, if the Gaussian blur of the larger picture background, the two seem to be made in a combination of a match.
"Ghost button" in foreign websites is very common, but in the domestic use is not uncommon, and the domestic well-known online business solution provider Anyforweb in the design of the "ghost button" concept, the following is the Anyforweb "phantom button" works.
1.AnyForWeb the minimalist concept of transparent wireframe first into the search box, beautiful lines and gradient colors, so that the entire interface more elegant. "Search" button is to break free of all the shackles of the wireframe, with the sea and the island's large background map, so that the page looks free and beautiful.
2. The blurred background interface and the "phantom button" rub out the different sparks. The following case is a Kangaroo CMS landing page developed by Anyforweb. The busy city background is covered with a hazy color, and a clear, transparent wireframe button makes the page as a whole wonderful.
3. This is a small part of the official website designed by Anyforweb for the Shang yoga. The overall tone of the site matches the feeling of yoga, and the design of the Phantom button embodies the quiet simplicity of the yoga movement.
In addition, Anyforweb also for everyone to summarize the foreign website of the "ghost button" typical cases, for comment reference.
1. The way the site is logged in is the "ghost button" approach, the input box is fused with the word "sign up", and the top third-party login button even goes beyond the border limit, and the background also chooses a very simple picture, giving the minimalist style every detail.
2. Huemor designs, whether from the founder or the site itself, is not difficult to discover their unrestrained characteristics. This shows that creative institutions can also choose the "Ghost button", and then cooperate with the site's parallax rolling technology and some exquisite lovely effect, so that the site in the small fresh and also revealing playful.
3.Lander's website confirms that the global flattening of the design and the "phantom button" match did achieve our desired effect. Website overall feeling is like a happy child, full of innocence, lively and clever. The solid color background and the transparent wireframe buttons set off each other, creating a delicate balance of comfort.
4.EXPOSURE using a more nostalgic high-definition large image as the background, white text and buttons with the background of the black system, forming a sharp contrast, bring visitors a comfortable visual impact.
The 5.JET Edge is a private airline with a natural background for using photographs taken from a plane's porthole. But unlike most cases, the background image is not virtualized, which makes the entire Web page richer, while the "Ghost button" design in the site adds to the viewer's desire to click.
6.Reader MX is an online article to read the optimization of the sharing tool, in order to leisurely life, pleasant reading for the idea, and the concept also into the Web site. The button on the right even abandons the only wireframe, putting the "ghost button" to the extreme of its lightweight and penetrating nature.
The background image used in 7.Adventive uses not only simple and clean pictures, but also the embellishment of textures and no virtualization, but it still does not seem to be a very tedious and complicated feeling, thanks to the help of buttons and fonts. Font color selected with the picture tones of the same color white and blue, focus on the bold display, button design and text content as close as possible, such a layout method also let the page save space.
8. The following case uses a more conservative approach, with all Black as the background, the bright color of the "phantom button" design, so that the button in the entire Web page is particularly prominent, the overall feeling of fashion without losing elegance.
9. Involvio is a website that is established to track the events occurring in the major campuses, and the users are of course mainly students. So the site is very appropriate to use the campus scene video as a background, the overall use of flat design and transparent wireframe buttons, and then fresh color, more foil the students youthful and lively characteristics.
"Ghost button" design techniques in foreign web site design is not uncommon, such a design is tall, but also the trend of the future, and can be simple operation, do not you still move?