Css button position to right for login form - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button layout

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

Description

Css button position to right for login form

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

.log_in {<!-- ww w  . j  a  v a2  s . c  o  m-->
   position: absolute;
   right: 20px;
   overflow: hidden;
   margin-top: 25px;
}
.log_in ul {
}
.log_in {
}
.login input{
   display: inline-block;
}
.log_in input[type="button"] {
   background-color: #03586a;
   height: 26px;
   border: none;
   color: #fff;
   width: 70px;
   margin-left: 4px;
}
.log_in input[type="button"]:hover {
   background-color: #4c829c;
}
.log_in input[type="button"]:hover {
}
.log_in input[type="text"], .log_in input[type="password"] {
   width: 130px;
   background-color: #fff;
   border: 1px solid #a1b5c4;
   line-height:normal !important;
   padding: 5px 10px;
   font-size: 12px;
   color: #327d89;
}
.log_in input[type="text"]:hover, .log_in input[type="password"]:hover {
   background-color: #cfd8e0;
}
.log_in input[type="text"]:focus, .log_in input[type="password"]:focus {
   background-color: #cfd8e0;
}


      </style> 
 </head> 
 <body> 
  <form class="log_in"> 
   <input type="text" placeholder="Username" name="username_login"> 
   <input type="password" placeholder="Password" name="password_login"> 
   <input type="button" value="Log in" id="log_in"> 
  </form>  
 </body>
</html>

Related Tutorials