Daily Front-End #1.0: Login Page

Introduction

Hello there! I’ve been wanting to do a daily thing where I code up some UI components just for practice. Maybe I’ll search around Dribbble and see if I build a design using HTML, CSS and perhaps JavaScript. For simple components I’ll use Codepen, however, for more complex layouts, I’ll just build it out locally.

Today, I’ve built a simple login UI that is inspired by this Dribbble post. Here is the full pen:

See the Pen Login UI by Tyler Souza (@tysweezy) on CodePen.

To make the inputs the way they are I set the default border to none and gave the inputs a bottom border. On focus the border color changes to a purple-ish color and have a nice, smooth transition.

  input {
   padding: 5px 2px;
   border: none;
   font-size: 1.1em;
   font-weight: 300;
   border-bottom: 2px solid #ccc;
   transition: border 250ms ease-in;

   &:focus {
     outline: none;
    border-bottom: 2px solid #605D7F;
   }
  } 

I made some customizations to the submit (login) button like so:

.login-btn {
  background: $btn-color;
  color: #fff;
  font-size: .9em;
  border: none;
  padding: 5px 20px;
  position: absolute;
  right: 70px;
  border-radius: 3px;
  border-bottom: 1px solid #227F5B;
  transition: background 150ms ease-in;

 &:hover {
   cursor: pointer;
   background: #227F5B;
 }
}

That’s pretty much the it. Just a simple login page. Stay tuned for another Daily Front-End. Happy coding! 🙂