Simple login form using Plain CSS

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Login Form</title>
</head>
<body>
	<div class="login-div">
		<h2 class="login-header">Login</h2>
		<form class="login-container">
			<div class="login-input">
				<input type="email" placeholder="Email">
			</div>
			<div class="login-input">
				<input type="password" placeholder="Password">
			</div>
			<div class="login-input">
				<input type="submit" value="Log in">
			</div>
		</form>
	</div>
</body>
</html>

CSS

@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700);
body {
  background: #3e3e3e;
  font-family: 'Ubuntu', sans-serif;
}
.login-div {
  width: 400px;
  margin: 16px auto;
  font-size: 16px;
}
.login-header,
.login-div .login-input {
  margin-top: 0;
  margin-bottom: 0;
}
.login-header {
  background: #868686;
  padding: 20px;
  font-size: 1.4em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}
.login-container {
  background: #ebebeb;
  padding: 12px;
}
.login-div div {
  padding: 12px;
}
.login-div input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  padding: 16px;
  outline: 0;
  font-family: inherit;
  font-size: 0.95em;
}
.login-div input[type="email"],
.login-div input[type="password"] {
  background: #fff;
  border-color: #bbb;
  color: #555;
}
.login-div input[type="email"]:focus,
.login-div input[type="password"]:focus {
  border-color: #888;
}
.login-div input[type="submit"] {
  background: #868686;
  border-color: transparent;
  color: #fff;
  cursor: pointer;
}
.login-div input[type="submit"]:hover {
  background: #3e3e3e;
}
.login-div input[type="submit"]:focus {
  border-color: #3e3e3e;
}

Simple login form using Plain CSS

HTML

CSS

Javascript