Ubuntu Login

This is a Ubuntu Inspired login. It does not use any JavaScript, only HTML and CSS. You are welcome to use it on your websites or any other places you see fit.

Screenshot

Ubuntu Login

HTML

<div class="wrapper">
  <h1>Ubuntu Login</h1>
  <section>
    <input class="main-form" type="text" name="usrname" placeholder="[email protected]">
    <input class="main-form" type="password" name="password" placeholder="password" required>
    <button>Sign in</button>
  </section>
  <footer>
    <input class="yolo" name="" value="" type="checkbox"><h6>Remember me, bro.</h6>
  </footer>
</div>

CSS

* {
  margin:0;
  padding:0;
  font-family: 'Ubuntu', Arial;
}

body {
  background:url("https://goo.gl/w6RY6");
}

.wrapper {
  text-align:center;
  width:500px;
  margin:50px auto;
}

h1 {
  color:#fff;
  text-shadow:1px 1px 0px rgba(0, 0, 0, 0.3);
  margin-bottom:20px;  
}

section {
  background:rgba(0, 0, 0, 0.4);
  margin:0 auto;
  width:300px;
  padding:20px;
  text-align:center;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
   -webkit-box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18);
      -moz-box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18);
          box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18);
}

.main-form {
  display:block;
  width:280px;
  margin-bottom:15px;
  padding:10px;
  outline:none;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  border:none;
  background:rgba(225, 225, 225, 0.1);
  font:0.7em 'Ubuntu';
  color:#fff;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

.main-form:focus {
  background:#fff;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  color:#777;
}

button {
  border:none;
  background: #606c88;
  background: -moz-linear-gradient(top,  #606c88 0%, #3f4c6b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b));
  background: -webkit-linear-gradient(top,  #606c88 0%,#3f4c6b 100%);
  background: -o-linear-gradient(top,  #606c88 0%,#3f4c6b 100%);
  background: -ms-linear-gradient(top,  #606c88 0%,#3f4c6b 100%);
  background: linear-gradient(to bottom,  #606c88 0%,#3f4c6b 100%);
  padding:17px;
  box-shadow:0px 1px 0px rgba(225, 225, 225,
    0.2), 0px 1px 0px rgba(0, 0, 0, 0.4) inset;
  outline:none;
  width:100%;
  text-transform:uppercase;
  color:white;
  letter-spacing:2px;
  text-shadow:1px 1px 0px rgba(0, 0, 0, 0.6);
  cursor:pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin-top:5px;
  font-family:'Ubuntu';
}

button:active {
  box-shadow:inset 0px 2px 1px rgba(0, 0, 0, 0.3);
}

footer {
  padding-top:20px;
  text-align:right;
  width:330px;
  margin:0 auto;
}

.yolo {
    -webkit-appearance: none;
    background:rgba(0, 0, 0, 0.4);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

.yolo:checked {
    background-color: #fff;
    color: #fff;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

.yolo:checked:after {
    content: '2714';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #000;
}

h6 {
  display:inline-block;
  position:relative;
  bottom:4px;
  left:6px;
  color:#fff;
  font-weight:300;
  text-shadow:1px 1px 0px rgba(0, 0, 0 ,0.6);
}

Live Preview

Coming Soon