Bootstrap login form

If you are looking for a login form that can be used for all types of websites and mobile applications, then this is the best one. The login form created here is the ideal one with animations. Awesome HTML and bootstrap login form download full source code.

It lets you create awesome designs. By using this framework, you can build beautiful login pages with minimal effort.

Download Login form source code

<!DOCTYPE html>
<html>
<head>	
  <title>Login</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="mystyle.css">
	<script>
	 $(document).ready(function(){
         $("#circle").hide();
	 $("#box").animate({height:"280px"},"slow");
	 $("#box").animate({width:"450px"},"slow");
	 $("#circle").fadeIn(1000);
        });
    function blinker(){
	  $('#blinking').fadeOut("slow");
	 $('#blinking').fadeIn("slow");
     }
 setInterval(blinker, 1000);
</script>
</head>
<body>
 <form>
 <center>
  <div id="circle">
   <h1 id="blinking" style="color: #00cccc;">Please Login Here</h1>
    <div id="box">
     <input type="text" name="uname" id="in" placeholder="Username"><br>
     <input type="password" name="pwrd" placeholder="Password" id="in">
     <input type="button" name="login" value="Login" id="inBtn" style="color:white;">
   </div>
   </div>
  </center>
 </form> 
</body>
</html>
 body
{
  background-color: black;
}
#box
{
 height: 2px;
 width: 1px;
 padding: 5px;
 background-color: #66f9ff;
 border-radius: 10px;
 line-height:90px;
 box-shadow: 0 0 15px #66ffff;
 }
 #circle{
  height: 100%;
  width: 75%;
  border-radius: 400px;
  background-color: none;
  padding-bottom: 30px;
  border : 4px solid #00cccc;
 }
 #in{
  width: 90%;
  height: 50px;
  border-radius: 10px;
  padding: 8px;
  border : 4px solid #00cccc;
  background-color: #333333;
  color: white;
 }
 #in:focus{
  border:6px solid #00cccc;
 }
 #inBtn{
  width: 90%;
  height: 50px;
  border-radius: 10px;
  line-height:10px;
  border : 4px solid #00cccc;
  background-color: #333333;
  color:white;
  cursor: pointer;
 }
 hr{
  color: #00cccc;
 }

Leave a Reply

You may also like

%d bloggers like this: