Real time example

Inspect the HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family:Georgia, 'Times New Roman', Times, serif;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.button_element {
background-color: rgb(75, 63, 184);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
cursor: pointer;
width: 100%;
}
.button_element:hover {
opacity: 0.8;
}
.imgdivision {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.image {
width: 150px;
border-radius: 50%;
}
.division {
padding: 16px;
}
.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
padding-top: 20px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
border: 1px solid #888;
width: 80%;
z-index: 999999;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: white;
cursor: pointer;
}
#login_Button{
width:auto;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
}
.animate {
-webkit-animation: animatezoom 1s;
animation: animatezoom 1s
}
@keyframes animatezoom {
0% {opacity: 0;} 
100% {opacity: 1;}
}
@-webkit-keyframes animatezoom {
0% {opacity: 0;} 
100% {opacity: 1;}
}
</style>
<script>
function displayinline(){
document.getElementById('id_1').style.display='inline';
document.getElementById('login_Button').style.display='none';
}
function displaynone(){
document.getElementById('id_1').style.display='none'
document.getElementById('login_Button').style.display='inline';
}
</script>
</head>
<body>
<button id="login_Button" class="button_element" onclick="displayinline()" >Login</button>
<div id="id_1" class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgdivision">
<span onclick="displaynone()" class="close" title="Close Modal">×</span>
<img src="img.png" alt="Author" class="image" >
</div>
<div class="division">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" id="uname" name="uname" autocapitalize="none" required>
<label for="pass_word"><b>Password</b></label>
<input type="password" placeholder="Enter Password" id="pass_word" autocapitalize="none" name="password" required>
<button class="button_element" type="submit">Login</button>
<span>
<a href="#" style="text-decoration: none;"><center>Forgot password?</center></a>
</span>
</div>
</form>
</div>
</body>
</html>

Download this HTML Source Code

Join Our Whatsapp team to make more codes

Kumar Lakshmanan

Popup Login Form Version_4

Real time example

Inspect the HTML

Download this HTML Source Code

Join Our Whatsapp team to make more codes

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Seven Spinner Animations Using Font-icons

Disco Lights Animation using CSS

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Popup Login Form Version_4

Real time example

Inspect the HTML

Download this HTML Source Code

Join Our Whatsapp team to make more codes

You may like these posts

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Seven Spinner Animations Using Font-icons

Disco Lights Animation using CSS

Total Pageviews

Contact Form

Footer Menu Widget