Align input field with 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

Align input field with 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">

input {<!--from   w  ww .j  a  v a2s. c  o m-->
   font-family: Arial, Verdana;
   font-size: 15px;
   padding: 5px;
   padding-top:5px
   border: 1px solid #b9bdc1;
   width: 150px;
   color: #797979;
   text-align:center;
   float:left;
   margin-right:10px;
}
.field {
   margin-top:4px;
   margin-bot:2px;
}
.button {
   float:left;
   font-weight: bold;
   cursor: pointer;
   color: #fff;
   text-shadow: 0 -1px 1px #64799e;
   /* Background gradient */
   background: #a5b8da;
   background: -moz-linear-gradient(top, #a5b8da 0%, #7089b3 100%);
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5b8da),
   to(#7089b3));
   /* Border style */
   border: 1px solid #5c6f91;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   /* Box shadow */
   -moz-box-shadow: inset 0 1px 0 0 #aec3e5;
   -webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
   box-shadow: inset 0 1px 0 0 #aec3e5;
}
.label{
   float:left;
   margin-right:10px;
}
.hint{
   clear:both
}


      </style> 
 </head> 
 <body> 
  <form:form class="form" method="post" action="" commandname="email"> 
   <h3>Formulaire email</h3> 
   <form:errors class="errorPass" path="email" /> 
   <div class="field"> 
    <form:label path="email" class="label">
      Email: 
    </form:label> 
    <input name="" type="text" class="input"> 
    <input class="button" type="submit" value="VALIDER"> 
    <p class="hint">Entrez votre email.</p> 
   </div> 
  </form:form>  
 </body>
</html>

Related Tutorials