New trends in web design! Have you ever heard of the Phantom button?

@ Chen Zimu transparent button, as the name suggests, that is, in the design of the button in the Web page, no longer design complex colors, styles and textures, but only the outline of the line frame, only the text to indicate the function, background, with the entire page/background of the design of a way. Foreign designers called "Ghost button" (Ghost Buttons), praised this kind of button permeability simple, fitting the overall style without losing charm, not attractive. The design of the button is already there, but after the switch between iOS and Android, it took the flat of the storm, became the new trend of web design, with similar design of the web design works springing up in general, greeted.

"Phantom" in the design of Web page buttons

To say that the transparent button is "phantom" is not wrong, "thin" and "through" is the greatest feature of this design. Do not set the background without texture, the button only a thin layer of wireframe marked boundaries, to ensure that it as a button function, and reached a "slim" visual beauty. The background behind the button is often relatively elegant, or a solid color, or Gaussian blur, or tonal depression, which makes even if the button does not affect the view of the whole picture, the background can be presented without affecting the visual expression of the button, the two sides against each other to achieve a delicate balance. Interestingly, designers are more free to use this pairing than ever before. A simple way to deal with the two is not complicated, handy. Two are easy to adjust, want to highlight the background, just strengthen the picture definition and color saturation, the button moved to the visual focus, the button for more slender font can be, if you want to highlight the function, guide the user, just strengthen the background ambiguity, reduce the brightness, the title, copy, button in Focus, The font in the button can be suitably bold, the color can be used more jump off, a little adjustment can be attained tall.

So, use this to do web design, not difficult, and as the general trend, you can easily take off, right? Gossip less, first case.

　　1. Nuji

The iOS app's homepage is not designed with complex backgrounds and textures, but only blurs the image of an umbrella in the iOS interface to the bottom, setting off the text and transparency buttons on the left and the iphone and UI on the right. Large, transparent buttons that are almost the same width as the copy. In this case, if users are interested in this app, they won't miss the demo video linked to the button.

　　2. Iuvo

Iuvo Web page not only has multiple wireframe buttons, but also with a number of lines outlined by the simple wireframe icon, greatly enrich the page design. The virtual vision complements the clarity of the close-up, and makes the buttons and icons stand out. At the same time, the left-hand navigation bar also uses a transition animation, making the entire page alive.

　3. Papaya

Papaya is a functional website where you can book tickets for a variety of events. The Web page is divided into three, to show three different activities, dark color background makes the yellow time and white events appear obvious and prominent, the sight of the move down can automatically see the Purchase ticket button. Up and down font consistent, transparent button box slender and not distracting, praise.

　　4. Charles-axel Pauwels

The design of this web page, as mentioned above, the background of virtual, low brightness, highlighting the site's foreground visual elements. The wireframe logo is placed at the top, separated by dotted lines, highlighting the middle site name. Size font contrast, enhanced name, but also describes the site features. The bottom three transparent buttons provide a path function that allows you to make a choice, coherent, after you have defined the theme.

　5. Visage

Designers in the design of this page, also followed the article at the beginning of the principle, the difference is that he designed the transparency button to add a transition animation. When you move the mouse to the button, the button will automatically enlarge, and fill the corresponding color, and text color reversal, attract the eyeball. This ingenious use of transparent buttons is worth learning.

　　6. The DISTANCE

This home page does not use the virtual or lightness too low background, but the background composition and overall tone is very simple and tidy, the following three neon transparent button and the background of the store recruit each other, lively and natural.

　7. Trippeo

The entire Web page is bright and fresh, with the exception of a gradient background that is content. The blue background of high saturation has a bit of a world map as a texture embellishment, making it less monotonous. The contents of the scattered size are aligned to the left, and the bottom is the transparent button.

8. UNION ROOM

This site uses video as a background, and visitors only need to understand the organization's workflow through a changing background. The entire site looks ingenious and elegant with the background video that does not affect the foreground's logo, text, and transparent buttons.

　　9. ctemf

Although the designer chose Jeanwen to fill the picture, he still let the transparent button be placed directly below the page where the most easily found, which makes the content of the entire Web page rich, but the structure is simple and intuitive.

　20JEANS

This web page is handled in a fairly balanced way, the characters on the right and the gray walls form the background, no blur, no fade, black fonts and transparent buttons on the left and the right side of each other, and the previous network is not the same place it is not overly biased content, and looks very fashionable.