Simplest Login Form Template

Open In Editor Video Publish Your Code

<div class="grid">
  
      <form action="/" method="post" class="form login">
  
        <header class="login__header">
          <h3 class="login__title">Login</h3>
        </header>
  
        <div class="login__body">
  
          <div class="form__field">
            <input type="email" placeholder="Email" required>
          </div>
  
          <div class="form__field">
            <input type="password" placeholder="Password" required>
          </div>
  
        </div>
  
        <footer class="login__footer">
          <input type="submit" value="Login">
  
          <p><span class="icon icon--info">?</span><a href="#">Forgot Password</a></p>
        </footer>
  
      </form>
  
    </div>
  
  </body>
</body>
</html>

CSS

.align {
  display: grid;
  place-items: center;
}
:root {
  --gridMaxWidth: 24em;
  --gridWidth: 90%;
}
.grid {
  inline-size: var(--gridWidth);
  margin-inline: auto;
  max-inline-size: var(--gridMaxWidth);
}
.icon {
  block-size: 1.25em;
  display: inline-block;
  inline-size: 1.25em;
  line-height: 1.25em;
  margin-right: 0.625em;
  text-align: center;
  vertical-align: middle;
}
.icon--info {
  background-color: #e5e5e5;
  border-radius: 50%;
}
:root {
  --bodyBackgroundColor: #eaeaea;
  --bodyColor: #999;
  --bodyFontFamily: "Helvetica", "Arial";
  --bodyFontFamilyFallback: sans-serif;
  --bodyFontSize: 0.875rem;
  --bodyFontWeight: 400;
  --bodyLineHeight: 1.5;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
body {
  background-color: var(--bodyBackgroundColor);
  font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback);
  font-size: var(--bodyFontSize);
  font-weight: var(--bodyFontWeight);
  line-height: var(--bodyLineHeight);
  margin: 0;
  min-block-size: 100vh;
}
:root {
  --anchorColor: inherit;
  --anchorHoverColor: #1dabb8;
}
a {
  color: var(--anchorColor);
  text-decoration: none;
  transition: color 0.3s;
}
a:hover {
  color: var(--anchorHoverColor);
}
fieldset {
  border: none;
  margin: 0;
}
input {
  appearance: none;
  border: none;
  font: inherit;
  margin: 0;
  outline: none;
  padding: 0;
}
input[type="submit"] {
  cursor: pointer;
}
.form input[type="email"],
.form input[type="password"] {
  inline-size: 100%;
}
:root {
  --loginBorderRadius: 0.25em;
  --loginHeaderBackgroundColor: #282830;
  --loginInputBorderRadius: 0.25em;
}
.login__header {
  background-color: var(--loginHeaderBackgroundColor);
  border-top-left-radius: var(--loginBorderRadius);
  border-top-right-radius: var(--loginBorderRadius);
  color: #fff;
  padding: 1.5em;
  text-align: center;
  text-transform: uppercase;
}
.login__title {
  font-size: 1rem;
  margin: 0;
}
.login__body {
  background-color: #fff;
  padding: 1.5em;
  position: relative;
}
.login__body::before {
  background-color: #fff;
  content: "";
  height: 0.5em;
  left: 50%;
  margin-left: -0.25em;
  margin-top: -0.25em;
  position: absolute;
  top: 0;
  transform: rotate(45deg);
  width: 0.5em;
}
.login input[type="email"],
.login input[type="password"] {
  border: 0.0625em solid #e5e5e5;
  padding: 1em 1.25em;
}
.login input[type="email"] {
  border-top-left-radius: var(--loginInputBorderRadius);
  border-top-right-radius: var(--loginInputBorderRadius);
}
.login input[type="password"] {
  border-bottom-left-radius: var(--loginInputBorderRadius);
  border-bottom-right-radius: var(--loginInputBorderRadius);
  border-top: 0;
}
.login input[type="submit"] {
  background-color: #1dabb8;
  border-radius: var(--loginInputBorderRadius);
  color: #fff;
  font-weight: 700;
  order: 1;
  padding: 0.75em 1.25em;
  transition: background-color 0.3s;
}
.login input[type="submit"]:focus,
.login input[type="submit"]:hover {
  background-color: #198d98;
}
.login__footer {
  align-items: center;
  background-color: #fff;
  border-bottom-left-radius: var(--loginBorderRadius);
  border-bottom-right-radius: var(--loginBorderRadius);
  display: flex;
  justify-content: space-between;
  padding-bottom: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.login__footer p {
  margin: 0;
}

Simplest Login Form Template

Recommended

Simple Login Form

Developer Portfolio HTML Template

Login and Register Form

HTML

CSS

JS

Recommended

Simple Login Form

Developer Portfolio HTML Template

Login and Register Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS