Button aligned with input - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button

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

Description

Button aligned with input

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">

.button {<!--   www  .j  a va  2 s. c  om-->
   -moz-box-shadow: inset 0px -2px 0px 0px #006aeb;
   -webkit-box-shadow: inset 0px -2px 0px 0px #006aeb;
   box-shadow: inset 0px -2px 0px 0px #006aeb;
   background-color: #3d94f6;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   border: 1px solid #337fed;
   color: #FFF;
   font-family: arial;
   font-size: 15px;
   font-weight: bold;
   padding: 9px 23px;
   vertical-align: middle;
}.button:hover {
   border: 1px solid #1052B4;
}.button:active {
   position:relative;
   top:1px;
}
.form  {
   width: 290px;
   border: 1px solid #D6D6D6;
   background-color: #F9F9F9;
   font-size: 18px;
   color: #767676;
   padding-top: 10px;
   padding-right: 4px;
   padding-bottom: 6px;
   padding-left: 3px;
   border: 1px solid #d5d5d5;
   color: #333;
   border-radius: 4px 4px 4px 4px !important;
   height: 25px;
}
.form.small{
   height: 20px;
   vertical-align: middle;
}


      </style> 
 </head> 
 <body> 
  <input name="name" class="form small" title="Username" maxlength="2048"> 
  <input class="button" type="submit" value="Select">  
 </body>
</html>

Related Tutorials