CSS Login Form

css-login-form.markdown

CSS Login Form

A Pen by Tristan Johnson on CodePen.

License.

index.html

<!--
  Updated as of: 1/22/21
-->
<img src="https://projectno51.000webhostapp.com/aesthetic-wallpaper-38-700x394.jpg" alt="background" class="background">

<div class="container">
  <div class="form">
    <div class="header">
      <h2 class="text">Login</h2>
    </div>
    <input type="text" placeholder="Username" class="user"><br><input type="password" placeholder="Password" class="psw">
    <button class="login">Login</button>
  </div>
</div>

script.coffeescript

###
Made By: Tristan Johnson

Audio Visualizer:
https://codepen.io/InsightMusic/pen/zYKXqzK

If you have a suggestion comment and I will make it.

This is not supposed to be a formal login form that you would see on a website. All/Most of the login forms I make are unique
###
alert 'Made with ❤️ by Bob \n Not really...'

style.scss

body {
  margin: 0;
  overflow: hidden;
}

.background {
  position: fixed;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  .form {
    height: 250px;
    width:400px;
    background-color: #f5f5f5;
    border-radius: 23px;
    opacity: 1;
    transition: all 1s;
    
    &:hover {
      opacity: .8;
    }
    
    input {
      border: none;
      background-color: transparent;
      border-top: 3px solid #a39193;
      padding: 10px;
      outline: none;
      transition: all .5s;
      width: 175px;
      
      &:hover {
        width: 100px;
      }
    }
    
    .login {
      position: absolute;
      top: 75%;
      left: 95%;
      transform: translate(-95%, -75%);
      height: 50px;
      width: 70px;
      cursor: pointer;
      border: 3px solid #a39193;
      background-color: transparent;
      border-radius: 5px;
      color: #333;
      font-size: 17px;
      font-weight: 600;
      outline: none;
      transition: all .5s;
      
      &:hover {
        height: 150px;
        width: 50px;
        font-size: 12px;
        top: 50%;
        left: 90%;
        transform: translate(-90%, -50%);
      }
    }
    
    .user {
      position: absolute;
      top: 50%;
      left: 10%;
    }
    
    .psw {
      position: absolute;
      top: 75%;
      left: 10%;
    }
    
    .header {
      
      
      .text {
        color: #66545e;
        letter-spacing: 2.5px;
        position: absolute;
        left: 10%;
        border-top: 3px solid #a39193;
        padding: 10px;
        font-weight: bold;
        font-family: 'Noto Sans JP', sans-serif;
        cursor: default;
      }
    }
  }
}