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 shiny buttons are pretty? 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 of source code download

 

These exquisite effects are usedCSS3RGBA, box-shadow (shadow), border-radius (border rounded corner), and linear-gradient (linear gradient). To facilitate reading, the code for the simplified 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, 434343) 0px 1px 2px; background: #242424; border: 1px solid #; border-radius: 4px; /* use multi-layer shadow to implement the first layer of Button stereo effect: the Y axis offset is 1 pixel, and the opacity is 0.25. The second layer of the white outer shadow effect: the third layer of the White inner shadow effect with a 1 pixel offset and an opacity of 0.25 on the Y axis: The fourth layer of the Black outer shadow effect with an offset of 0 and an opacity of 0.25: Y axis offset 20 pixels, opacity 0.03 White inner shadow effect layer 5: X axis offset-20 pixels, Y axis offset 20 pixels, opacity 0.15 black inner shadow effect layer 6: x-axis offset: 20 pixels, Y-axis offset: 20 pixels, and 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.25, 0, 255,255,255) 0px 0px 0px, inset rgba (0.03, 0.15) 0px 20px 0px, inset rgba (, 0) 0px-20px 20px, inset rgba (255,255,255, 0.05) 0px 20px 20px;/* Make the changed attribute transition at a constant speed within 100 milliseconds */transition: all 0.1 s linear ;}. button: hover {/* the multi-layer button shadow effect when the mouse is hovering. Compared with the default button, the first layer has changed: the first layer: x-axis offset 2 pixels, Y-axis offset 5 pixels, opacity 0.5 black outer shadow effect */box-shadow: rgba (0.5, 0,) 0px 2px 5px, inset rgba (255,255,255, 0.25) 0px 1px 0px, inset rgba (0.25, 0, 255,255,255) 0px 0px 0px, inset rgba (0.03,) 0px 20px 0px, inset rgba, 0, 0.15) 0px-20px 20px, inset rgba (255,255,255, 0.05) 0px 20px 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 effect of closing the button at the top */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 bytes-in-out (acceleration first and then deceleration) within 300 milliseconds */transition: all 0.3 s bytes-in-out ;}

　　

Online Demo of source code download

 

Articles you may be interested in

• 10 useful results in Web development [Source Code download]
• Excellent jQuery Ajax paging plug-ins and tutorials carefully selected
• 12 amazing creative 404 error page Designs
• Let the website get started! 12 excellent jQuery animation plug-ins
• 8 amazing HTML5 and JavaScript Effects

 

Link to this article: Use CSS3 to create a set of smooth button Effects

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

This article from [dream sky (http://www.cnblogs.com/lhb25 )]