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.

SOURCE Download Online Demo

These fine effects are used in CSS3 RGBA, Box-shadow (Shadow), Border-radius (Border fillet), and linear-gradient (linear gradient), 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 to implement button stereoscopic first: The second layer of the white outer shadow effect with a y-axis offset of 1 pixels, an opacity of 0.25: a Y-axis offset of 1 pixels, a white inner shadow effect with an opacity of 0.25 the third layer: offset shift 0, black outer shadow effect with opacity 0.25    Layers: Y-axis offset 20 pixels, white inner shadow effect with opacity 0.03 fifth: X-axis Offset-20 pixels, y-axis offset 20 pixels, black inner shadow effect sixth layer with opacity 0.15: X-axis offset 20 pixels, y-axis offset 20 pixels, white inner shadow effect with opacity 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 0p x 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; /* Allow variable properties to transition at a constant speed within 100 milliseconds */Transition:all 0.1s linear;}. Button:hover {/* button multi-layer shadow effect when mouse hover, and button default when compared to only the first layer has changed: First layer: X-axis offset 2 pixels, y-axis offset 5 pixels, opacity 0.5 black outer shadow Effect */Box-shadow:rgba (0,0,0,0.5) 0px 2px 5px, inset Rgba (255,255,255,0.25) 0 px 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 x 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 the changed properties to Ease-in-out (accelerate and decelerate) within 300 milliseconds/Transition:all 0.3s ease-in-out;}

　　

SOURCE Download Online Demo

Related articles that may be of interest to you

• Web development in a very practical 10 effects "with Source download"
• Carefully selected excellent jquery Ajax page plug-ins and tutorials
• 12 Amazing ideas for 404 error page Design
• Let the website Move! 12 Excellent jQuery animation plugins
• 8 stunning HTML5 and JavaScript effects

This article links: using CSS3 to create a set of textured smooth button effect

Compilation Source: Dream Sky focus on front-end development technology sharing web design resources

This article comes from "Dream Sky (http://www.cnblogs.com/lhb25/)"