Pop-up Login Form using Java-Script and CSS.

Simple Pop-up Login Form On Mouse Over using Java-Script CSS and HTML. Programming Seekerz :)

Download Full Code From This Link

---

HTML:
<div class="btn" onmouseover="fun()">

<h1> Take Mouse Over Me And the Pop-Up Appers</h1></div>

<div class="pic" id="pic1">
<input type="button" onclick="yoyo()" value="X" class="cn"/>

<form class="myform" action="abc.html" method="post">
<input type="text" class="items" placeholder="User Name"/>
<input type="Password" class="items" placeholder="Password"/>
<input type="submit" class="btn1" value="LOG-IN"/>
</form>


</div>

---

CSS:

<style>
.cn{color:red;background-color:white;border:2px solid;border-radius:50px;float:right;}

.btn{color: red;font-size: 22px;border:1px solid;text-align:center;}

.pic{width: 25%;height: 27%;display:none;bottom:40%;right:40%;position:fixed;
box-shadow: 3px -3px 59px 42px rgba(46,54,43,0.40);
}

.myform{
  margin: auto;
  padding: 0px;
  height: 100%;
  width: 100%;
  background: hotpink;
  }
.items{
  border: 5px solid;
  border-radius: 10px;
  font-size: 18px;
  width: 80%;
  padding: 10px;
  margin: 10px;
}
.btn1{
  background: skyblue;
  border: 5px solid black;
  border-radius: 20px;
  padding: 10px;
  float:right;
  margin: 2%;
  color: black;
  font-size:14px;
  font-weight: bold;
  }


</style>

---

Java-Script:

<script>
function fun(){
var x=document.getElementById("pic1");
x.style.display = "block";
}
function yoyo(){
var x=document.getElementById("pic1");
x.style.display = "none";

}

</script>