Log in and Sign up 2 in html css js

<html>
<head>
<title>Log in and Sign up</title>
<style>

#log {display:none;}
#sign {display:none;}

div{
background-color:#B8EEF8;
box-shadow: 5px 5px 10px #000000;}

#b1{
background-color: white;
color: black;
border: 2px solid #4CAF50;
transition-duration: 0.5s;
cursor: pointer;
border-radius:5px;}
#b1:hover {background-color: #4CAF50;
color: white;
border: 2px solid black;}

#b2{
background-color: white;
color: black;
border: 2px solid #008CBA;
transition-duration: 0.5s;
cursor: pointer;
border-radius:5px;}
#b2:hover {background-color: #008CBA;
color: white;
border: 2px solid black;}

#b3{
background-color: white;
color: black;
border: 2px solid #FF0000;
transition-duration: 0.5s;
cursor: pointer;
border-radius:5px;}
#b3:hover {background-color: #FF0000;
color: white;
border: 2px solid black;}

input[type=text],input[type=password]{
margin: 5px 30px;
padding-left: 10px;
height: 30px;
width: 200px;
border-radius:25px;}

input[type=button]{
height: 40px;
width: 60px;
margin-left: 30px;}

button{
height: 40px;
width: 40px;
margin-left: 50px;
font-size: 20px;}

</style>
<script>
function over1(){document.getElementById("log").style.display = "block";
document.getElementById("sign").style.display = "none";}

function over2(){document.getElementById("sign").style.display = "block";
document.getElementById("log").style.display = "none";}

function over3(){document.getElementById("sign").style.display = "none";
document.getElementById("log").style.display = "none";}
</script>
</head>
<body>
<form>

<div id="d1" width="100%" height="100%"><br/>
<input type="button" value="Log in" onmouseover="over1()" id="b1">
<input type="button" value="Sign up" onmouseover="over2()" id="b2">
<button onmouseover"over3()" id="b3">x</button>
<br/><br/></div><br>

<div id="log">
<input type="text" placeholder="email"/><br/>
<input type="password" placeholder="password"/><br/>
</div>

<div id="sign">
<input type="text" placeholder="username"/><br/>
<input type="text" placeholder="email"/><br/>
<input type="password" placeholder="password"/><br/>
<input type="password" placeholder="confirm password"/><br/>
</div>

</form>
</body>
</html>