Use CSS3 to create a set of buttons with delicate and silky texture_html/css_WEB-ITnose

CSS3 introduces many powerful new features, allowing designers and developers to easily create various exquisite interface effects. These shiny buttons below are pretty, aren’t they? Hover the mouse over the button and there is a dynamic glossy moving effect.

Warm reminder: To ensure the best results, please browse in 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 corners) ) and linear-gradient (linear gradient), for ease of reading, the simplified code of 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;

/* X-axis offset by 1 pixel , Y-axis offset 2 pixels, black text-shadow with opacity 0.9*/

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

background: #434343;

border: 1px solid #242424;

border-radius: 4px;

/*

Use multiple layers of shadow to achieve button three-dimensional effect

The first layer: a white outer shadow effect with a Y-axis offset of 1 pixel and an opacity of 0.25

The second layer: a white inner shadow with a Y-axis offset of 1 pixel and an opacity of 0.25 Shadow effect

Third layer: black outer shadow effect with offset 0 and opacity 0.25

Fourth layer: white inner offset 20 pixels on the Y axis and opacity 0.03 Shadow effect

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

Sixth layer: X-axis offset 20 pixels, Y-axis offset 20 pixels, opacity 0.05 white inner shadow effect

*/

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 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20p x20px, inset rgba(255,255,255,0.05) 0px 20px 20px;

/* Let the changed attributes transition uniformly within 100 milliseconds*/

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

/*

The multi-layer shadow effect of the button when the mouse is hovered. Compared with the default button, only the first layer has changed:

First layer: X axis Black outer shadow effect with an 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, 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 20px 20px; } .shine {

display: block;

position: relative;

/* IE Use the filter below to achieve the gradient effect*/

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

/* Use a horizontal linear gradient to achieve the Guanze 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;

/* Let the changed attributes be ease-in-out (accelerate first and then decelerate) within 300 milliseconds Transition*/

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

Fixed link to this article: http://www.i7758.com/archives/1591.html