Home > Developer > Web Develop
Read the << diagram of the desert today css3>> found that the example of this button is very good, slightly improved the original example.
Remove some of the prefixes that are not used now, complete the final version of the. Clearfix, and style slightly modified ~ ~
Because the amount of code is not many, the wood has a separate CSS ...
<! DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Make a 3D search form</title> <style> . Clearfix: Before,. Clearfix: After { content: ""; display: table; } . Clearfix: After { clear: both; Overflow: hidden; } #formWrapper { margin:0 Auto ; width: 650px ;/ * Set the width of the search form * / padding: 8px ; Overflow: hidden ;/ * Clear float * / / * Set the form's border effect * / border-width: 1px ; border-style: solid ; border-color: #dedede #bababa #aaa #bababa ;/ * The most critical code, set the form 3D stereoscopic effect * / Box-shadow: 0 5Px5PxRgba (255, 255, 255, 0.3),0 3Px0 #bbb,0 4Px0 #aaa,0 5Px5Px#444,0Px0 5PxRgba (228,162,. 3)Inset;/ * Set fillet effect * / Border-radius: tenpx ; -webkit-border-image: -webkit-linear-gradient (nandeg, #5191AC, #5 A7BC6) ; -o-border-image: linear-gradient (top deg, #5191AC, #5A7bc6) ; border-image: linear-gradient (top deg, #5191AC, #5A7bc6) ;} / * Input box style effect * / #formWrapper . Search { width: 530px ; height: px ; padding: tenpx 5px ; float: Left; font: bold + px ' lucida Sans ',' trebuchet MS ',' Tahoma ' ; Border: 1px solid #ccc ; Border-radius: 3px ; Border-radius: 5px ; box-shadow: 0 0 5px rgba (166,189,. inset,1px 0 1px rgba (157,179 ,. ) ;} / * The input box gets the focus when the style * / #formWrapper . Search:focus {outline : 0 ; color : RGBA (106 , 105 , 105 ,. 73 ) ; border-color : #C7D1D0 ; box-shadow : 0 1 px 1 px #bbb inset ; #formWrapper . Search:-ms-input-placeholder,#formWrapper . Search:-moz-placeholder,#formWrapper . Search::-webkit-input-placeholder { color: #2DAF2B; font-weight: . } / * Search Button effect * / #formWrapper . BTN { float: Right; Border: 1px solid #00748f ; height: px ; width: px ; padding: 0 ; cursor: pointer ; font: bold -px arial,helvetica ; color: #fafafa ; text-transform: uppercase ; color: #fafafa ; background-color: #0483a0 ; -webkit-border-image: -webkit-linear-gradient (top, #b2c3, #0483a0) ; -o-border-image: linear-gradient (top,#b2c3,#0483a0) ; border-image: linear-gradient (top,#b2c3,#0483a0) ; Border-radius: 5px ; text-shadow: 0 1px 0 Rgba (0, 0, 0, 0.3) ; box-shadow: 0 1px 0 rgba (255, 0, 0, 0.3) inset,1px 1px 1px #0483a0 ;} /* Button suspension state and focus State effect */ #formWrapper . BTN: Hover,#formWrapper . BTN: Focus { background-color: #31b2c3 ; box-shadow: 1 1 3px #31b2c3 ; Border-radius: 5px ; background-image: -webkit-linear-gradient (top, #0483A0, #b2c3) ; background-image: linear-gradient (top,#0483a0,#b2c3) ;} / * button click Effect * / #formWrapper . BTN: Active { outline: 0; box-shadow: 0 1px 4px rgba (0, 0, 0 , 0.5) inset; } /*firefox button to remove the focus line * / #formWrapper::-moz-focus-inner { border: 0; } </style> </head> <body> <form Action="#" id="Formwrapper"> <div class="formfiled clearfix"> <input class="search" placeholder="Search for css3,html5,jquery ..." Required="" type="text"> <input class="btn Submit" type="Submit" value ="Go >>"> </div> </form> </body></html>Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Note-CSS3 implement 3D search Input box
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
