December 5, 2015

Minimalist login box

Minimalist login box

A minimalist and a futuristic login box for you. It looks simple and clean without using more spaces. You can reduce the width of the box if required. It is purely responsive.


<div class="body">
  <form action="">
    <input class="input" type="text" placeholder="Username" />
    <input class="input" type="password" placeholder="Password" />
    <input type="button" value="▶" />
  <p>Forgot your password? <a href="#">click here</a></p>


* {
  box-sizing: border-box;  
  position: relative;

$prim-col: #111;
$sec-col: #333;
$prim-font-col: #eee;
$sec-font-col: #ddd;
$btn-border-col: #588c73;

body {
  background: #588c73

.body {
  font-family: "Open Sans";
  font-size: 10px;

 .input {
    background: transparent;
    border: 0;
    color: #eee;
    font-family: "Open Sans";
    font-size: 1.5em;
    height: 5em;
    width: 100%;
  input[type="text"] {
    border-bottom: .1em solid $sec-col;

  input[type="password"] {
    border-top: .1em solid $sec-col;

  input[type="button"] {
    background: $prim-col;
    border: .4rem solid $btn-border-col;
    border-radius: 100%;
    color: $prim-font-col;
    font-size: 2vmax;
    font-size: 1.2rem;
    height: 3em;
    position: absolute;
    right: -1.5em;
    top: 2.8rem;
    width: 3em;
    cursor: pointer;

  input:focus {
    outline: 0;

  form {
    background: $prim-col;
    border-radius: 1em;
    margin: 5vmax auto 0;
    padding: 0 2em;
    width: 50vmax;

  p {
    color: $sec-font-col;
    font-size: 1.5em;
    font-weight: bold;
    margin: 1em auto;
    padding-left: 1.3em;
    width: 50%;

  a {
    color: $sec-font-col;
    text-decoration: none;


I have used Open Sans from google font.

No comments:

Post a Comment

Popular Posts