Posted By

CKOink on 02/24/12


Tagged

search from CSS3


Versions (?)

CSS3 Form Search Button


 / Published in: HTML
 

A nice looking search button built with css3

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

Report this snippet  

You need to login to post a comment.