Fluid text input with floated and variable right button - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button

Description

Fluid text input with floated and variable right button

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

body { margin: 20px; } /* push down form below "Result" label */
form {<!--   w  w w .j  av  a  2  s.com-->
   background: #333;
   font-size: 20px;
   position: relative;
   padding: 0;
   margin: 0;
}
input, button {
   box-sizing: border-box;
   margin: 10px;
   padding: 7px;
   border: 0;
   line-height: 1;
   vertical-align: baseline;
   border-radius: 3px;
}
input {
   width: 100%;
}
button {
   background: lightblue;
   position: absolute;
   margin-right: 0;
   right: 0;
   top: 0;
}
button::-moz-focus-inner {
   border: 0;
   padding: 0;
}


      </style> 
 </head> 
 <body> 
  <form action="#" class="clearfix"> 
   <input type="text" placeholder="Enter text..."> 
   <button type="submit">Submit Me</button> 
  </form>  
 </body>
</html>

Related Tutorials