Advanced Search

CSS3 Form Search Button

/ Published in: HTML
Save to your folder(s)
A nice looking search button built with css3

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Base</title>
  5. <style>
  6. body {
  7. background:#transparent;
  8. }
  9.  
  10. div#wrapper {
  11. background:#eee;
  12. margin:0 auto;
  13. padding:0;
  14. width:960px;
  15. min-height:600px
  16. }
  17.  
  18. .cf:before, .cf:after{
  19.     content:"";
  20.     display:table;
  21. }
  22.  
  23. .cf:after{
  24.     clear:both;
  25. }
  26.  
  27. .cf{
  28.     zoom:1;
  29. }
  30.  
  31. /* Form wrapper styling */
  32. .form-wrapper {
  33.     width: 450px;
  34.     padding: 15px;
  35.     margin: 150px auto 50px auto;
  36.     background: #444;
  37.     background: rgba(0,0,0,.2);
  38.     border-radius: 10px;
  39.     box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
  40. }
  41.  
  42. /* Form text input */
  43.  
  44. .form-wrapper input {
  45.     width: 330px;
  46.     height: 20px;
  47.     padding: 10px 5px;
  48.     float: left;
  49.     font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
  50.     border: 0;
  51.     background: #eee;
  52.     border-radius: 3px 0 0 3px;
  53. }
  54.  
  55. .form-wrapper input:focus {
  56.     outline: 0;
  57.     background: #fff;
  58.     box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
  59. }
  60.  
  61. .form-wrapper input::-webkit-input-placeholder {
  62.    color: #999;
  63.    font-weight: normal;
  64.    font-style: italic;
  65. }
  66.  
  67. .form-wrapper input:-moz-placeholder {
  68.     color: #999;
  69.     font-weight: normal;
  70.     font-style: italic;
  71. }
  72.  
  73. .form-wrapper input:-ms-input-placeholder {
  74.     color: #999;
  75.     font-weight: normal;
  76.     font-style: italic;
  77. }    
  78.  
  79. /* Form submit button */
  80. .form-wrapper button {
  81.     overflow: visible;
  82.     position: relative;
  83.     float: right;
  84.     border: 0;
  85.     padding: 0;
  86.     cursor: pointer;
  87.     height: 40px;
  88.     width: 110px;
  89.     font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
  90.     color: #fff;
  91.     text-transform: uppercase;
  92.     background: #d83c3c;
  93.     border-radius: 0 3px 3px 0;
  94.     text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
  95. }   
  96.  
  97. .form-wrapper button:hover{
  98.     background: #e54040;
  99. }	
  100.  
  101. .form-wrapper button:active,
  102. .form-wrapper button:focus{
  103.     background: #c42f2f;
  104. 	outline: 0;
  105. }
  106.  
  107. .form-wrapper button:before { /* left arrow */
  108.     content: '';
  109.     position: absolute;
  110.     border-width: 8px 8px 8px 0;
  111.     border-style: solid solid solid none;
  112.     border-color: transparent #d83c3c transparent;
  113.     top: 12px;
  114.     left: -6px;
  115. }
  116.  
  117. .form-wrapper button:hover:before{
  118.     border-right-color: #e54040;
  119. }
  120.  
  121. .form-wrapper button:focus:before,
  122. .form-wrapper button:active:before{
  123.         border-right-color: #c42f2f;
  124. }      
  125.  
  126. .form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
  127.     border: 0;
  128.     padding: 0;
  129. }
  130. </style>
  131. </head>
  132. <body>
  133. <div id="wrapper">
  134. 	 <form class="form-wrapper cf">
  135.         <input type="text" placeholder="Search here..." required>
  136.         <button type="submit">Search</button>
  137.     </form>
  138. </div>
  139. </body>
  140. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.