big color button
The large color block button is now the most used style, that is, a flat fill color block plus text or ICON, which is suitable for most places.
Usage/Scenario: The large color block button is used very frequently. Because of its prominence, it is very suitable for guiding users to operate. As shown in the figure, the visual focus can be locked at the first time, and the next operation can be known.
ghost button
Basically, it is the style of text and stroke. The prominence of the stroke buttons is weak, but the ghost button is weaker than the b2b data general stroke. If there is none, the visual harmony on the interface is higher, but the guidance is not strong. .
Usage/Scenario: It is mostly used in places with rich backgrounds. The ghost button will not be too eye-catching, will not block the background too much, and will not appear too obtrusive in some photos or illustrations, because the prominence of the stroke button is much lower than that of the large button. The color block button can also be used in conjunction with the color block to make the subject more distinct. When a large number of buttons are needed, make good use of this style, and the interface color will not occupy too much area and be too bright.
Diffuse projection button
Diffuse shadow style buttons are usually "processed" on the basis of the large color block button, adding a soft shadow of the same color as the button or a lighter color at the bottom of the button.
Usage/Scenario: Usually on the basis of the large color block button, if you want to make the button more prominent, or you want to make the page hierarchy more distinct and the style more beautiful, diffuse projection may be suitable for you.
Gradient button
There have always been large color blocks of solid color buttons. Recently, gradient buttons have become more and more popular. Adding diffuse projection on the basis of beautiful gradient will make the visual effect more brilliant.
Usage/Scenario: The gradient color buttons are also very prominent and guiding, and the visual effects are also very brilliant, but they should be used selectively according to the tone of the product. The colors in the gradient are generally inseparable from the main color of the product.
Translucent button
As the name suggests, the color block at the bottom of the button is translucent, which is lighter and more visually harmonious than the large color block button, but the guidance is not as strong as the large color block button.