Use CSS3 to create a set of fine-textured, silky-smooth buttons

CSS3 introduces many new features that are powerful, making it easy for designers and developers to create a variety of beautiful interface effects. Here are some shiny shiny buttons, pretty, right? Hover your mouse over the button and have a sporty, shiny moving effect.

Tips: For the best results, browse through modern browsers such as ie10+, Chrome, Firefox, and Safari.

Online Demo

SOURCE download

These fine effects are used in Css3rgba, Box-shadow (Shadows), Border-radius (border fillets), and linear-gradient (linear gradients), and for readability, the code for the streamlined public section 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;

/* x-axis offset 1 pixels, y-axis offset 2 pixels, opacity 0.9 black text Shadow */

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

Background: #434343;

border:1px solid #242424;

border-radius:4px;

/*

Use multi-layer shading for button stereoscopic effects

First layer: white outer shadow effect with a y-axis offset of 1 pixels and an opacity of 0.25

Second layer: White inner shadow effect with a y-axis offset of 1 pixels and an opacity of 0.25

Third layer: Offset shift 0, opacity of 0.25 black outer shadow effect

Fourth layer: White inner shadow effect with 20 pixels offset and 0.03 opacity

Fifth layer: X-axis Offset-20 pixels, y-axis offset 20 pixels, black inner shadow effect with opacity 0.15

Sixth: White inner Shadow effect with an X-axis offset of 20 pixels, a Y-axis offset of 20 pixels, and an opacity of 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,0,0,0.25) 0px 0px 0 PX, inset Rgba (255,255,255,0.03) 0px 20px 0px, inset Rgba (0,0,0,0.15) 0px-20px 20px, inset Rgba (255,255,255,0.05) 0px 20p x 20px;

/* Let the changing properties transition at a constant speed within 100 milliseconds */

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

/*

The button multi-layer shadow effect when hovering over the mouse, and the button by default when compared to only the first layer is changed:

First layer: black outer shadow effect with an X-axis offset of 2 pixels, a Y-axis offset of 5 pixels, and an opacity of 0.5

*/

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

Display:block;

position:relative;

/* Use filters to achieve gradient under IE * *

Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #00ffffff ', endcolorstr= ' #00ffffff ', gradienttype=1);

/* Use a horizontal linear gradient to implement the Sekisawa effect at 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;

/* Allow changing properties to transition within 300 milliseconds by ease-in-out (acceleration and deceleration) */

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

This article fixed link: http://www.i7758.com/archives/1591.html

Use CSS3 to create a set of fine-textured, silky-smooth buttons