Use CSS3 to create a set of smooth and delicate buttons.

Use CSS3 to create a set of smooth and delicate buttons.

CSS3 introduces many new features that provide powerful functions, allowing designers and developers to easily create a variety of exquisite interface effects. Which of the following are shiny buttons? Hover the mouse over the button, and there is a dynamic glossy moving effect.

Tip: to ensure the best results, visit modern browsers such as IE10 +, Chrome, Firefox, and Safari.

Online Demo

Source code download

These exquisite effects use CSS3RGBA, box-shadow (shadow), border-radius (border rounded corner), and linear-gradient (linear gradient) for ease of reading, the simplified code for the public part is as follows:

. Button {

Min-height: 1.5em;

Display: inline-block;

Padding: 12px 36px;

Margin: 40px 5px 5px 0px;

Cursor: pointer;

Opacity: 0.9;

Color: # FFF;

Font-size: 1em;

Letter-spacing: 1px;

/* Black text shadow with the X axis offset of 1 pixel, Y axis offset of 2 pixels, and opacity of 0.9 */

Text-shadow: rgba (0.9, 0,) 0px 1px 2px;

Background: #434343;

Border: 1px solid #242424;

Border-radius: 4px;

/*

Implement button stereoscopic effect using multi-layer shadow

Level 1: 1 pixel offset on the Y axis and a white outer shadow with an opacity of 0.25

Layer 2: 1 pixel offset on the Y axis and a white inner shadow with an opacity of 0.25

Layer 3: Black outer shadow with an offset of 0 and an opacity of 0.25

Layer 4: A White inner shadow with a horizontal offset of 20 pixels and an opacity of 0.03

Layer 5: Black inner shadow with X axis offset-20 pixels, Y axis offset of 20 pixels, and opacity of 0.15

Layer 6: the X axis offset is 20 pixels, the Y axis offset is 20 pixels, And the opacity is 0.05.

*/

Box-shadow: rgba (255,255,255, 0.25) 0px 1px 0px, inset rgba (255,255,255, 0.25) 0px 1px 0px, inset rgba (0.25, 0,) 0px 0px 0px, inset rgba (255,255,255, 0.03) 0px 20px 0px, inset rgba (0.15, 0, 255,255,255) 0px-20px 20px, inset rgba (0.05,) 0px 20px;

/* Make the changed attribute transition at a constant speed within 100 milliseconds */

Transition: all 0.1 s linear;}. button: hover {

/*

The multi-layer shadow effect of the button when you hover the mouse over the button. Compared with the default button, the first layer has changed:

First layer: Black outer shadow with X axis offset of 2 pixels, Y axis offset of 5 pixels, and opacity of 0.5

*/

Box-shadow: rgba (0.5, 0, 255,255,255) 0px 2px 5px, inset rgba (0.25, 0.25) 0px 1px 0px, inset rgba (, 0,) 0px 0px 0px 0px, inset rgba (255,255,255, 0.03) 0px 20px 0px, inset rgba (0.15, 0, 255,255,255) 0px-20px 20px, inset rgba (0.05,) 0px 20px ;}. shine {

Display: block;

Position: relative;

/* Use a filter under IE to achieve gradient effect */

Filter: progid: DXImageTransform. Microsoft. gradient (startColorstr = '# 00ffffff', endColorstr =' # 00ffffff', GradientType = 1 );

/* Use a horizontal linear gradient to achieve the smooth effect on the top of the button */

Background: linear-gradient (left, rgba (255,255,255, 0) 0%, rgba (255,255,255, 1) 50%, rgba (255,255,255, 0) 100% );

Padding: 0px 12px;

Top:-12px;

Left:-24px;

Height: 1px;

Box-shadow: rgba (255,255,255, 0.2) 0px 1px 5px;

/* Make the changed attribute transition in the forward-in-out (acceleration first and deceleration) mode within 300 milliseconds */

Transition: all 0.3 s bytes-in-out ;}

Fixed Link: http://www.i7758.com/archives/1591.html