Simple style buttons and CSS 3 implementation methods

Dribbble.com is a place where excellent designers around the world gather. I often see the excellent works of masters.

Today I see another nice button.

The designer uses a layer to implement the button. This button has 5 effects:

0. It is a solid fill layer.

1. Stroke Effect.

2. Highlight effect (that is, the "inner shadow" effect in the PSD ). Why can I use inner shadows for highlights? Because the designer uses a pure white shadow (opacity 65% ).

3. Projection effect (that is, the "projection" effect in PSD ). The shadow of a pixel down is insignificant, but it is vital to show the stereoscopic effect.

4. The effect of this shadow (that is, the "slope and relief" effect in the PSD ). This effect adds a 1-pixel black slope (opacity 15%) to the bottom of the button to create the photo of the button.

5. Highlight effect (that is, the "gradient superposition" effect in the PSD ). At this point, it is easy for viewers to feel like "the light source is hitting the button above the screen.

Now, add the text.

To make the text concave, add a 1 pixel shadow to the top of the text.

Well done! (Attaches the PSD file)

However

If you want to apply this button to a webpage, It is very troublesome (if you do not use CSS 3, the length of this button is difficult to adapt, unless you cut the graph, and the text shadow cannot be achieved, this is why our front-end developers hate IE.

The following describes how CSS 3 can implement the above button without using images.

This complex effect of light and shade is purely written.CodeThe efficiency is too slow. I use the online CSS 3 button Generator tool (chrome or Firefox is recommended ).

Steps:

1. Set the initial color start color to 589dfd for the highlighted layer (that is, the background in the figure) (why is this color used? In fact, you can select a blue color or use the color Extraction Tool to take the color from the PSD), select 50% and set the color to 488bf7, and set the end color to 3a7af2.

2. Border (border in the image), Set width to 1, radius to 5, other random.

3. projection (that is, the drop shadow in the image), set the color to pure black, the opacity Opacity is 0.2, the X axis is cheap 0 pixels, the Y axis offset 1 pixel (that is, down), the diffusion size is 0.

4. Highlight (inner shadow in the image). The parameters include pure white, 0.7, 0, 1, and 0.

5. Text shadow1 and text shadow2 in the graph.

After completing these settings, the corresponding code is displayed on the right side. Is it very convenient:

Final effect (with the complete code attached ):

Refer:

5 simple tricks to bring light and shadow into your designs

Simple button