Mwqyvq

index.html

<div class="container">
  <h1>Anypoint Platform</h1>
  <div class="form">
    <div class="form-group">
      <input id="input" type="type"></input>
      <label for="input">Username</label>
    </div>
    <div class="form-group">
      <input id="password" type="password"></input>
      <label for="password">Password</label>
    </div>
    <button type="button" class="btn btn-primary">Sign In</button>
  </div>
</div>

Mwqyvq.markdown

Mwqyvq

A Pen by Yi-An (Andrew) Lai on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>

style.css

@textbox-background-color: rgb(244,245,247);
@textbox-background-focus-color: #fff;
@textbox-border-color: #ccc;
@text-color: #555;
@label-color: #aaa;
@base-animation: all 0.1s;
@padding-top: 12px;
@padding-left: 10px;

body {
  margin: 0;
}

div.container {
  padding: 0;
  width: 100%;
}
h1 {
  text-align: center;
  font-weight: 100;
  width: 100%;
  background-color: #333;
  color: white;
  margin: 0 0 20px 0;
  line-height: 1.8em;
}
.form {
  width: 400px;
  margin: auto;
  
  .form-group {
    margin-bottom: 20px;
    position: relative;
    
    label {
      font-weight: 400;
      position: absolute;
      color: @label-color;
      left: @padding-left;
      top: @padding-top;
      transition: @base-animation;
    }
  }
  
  input {
    width: 100%;
    border-top: none;
    border-bottom: none;
    border-left: 2px solid @textbox-border-color;
    border-right: 2px solid @textbox-border-color;
    padding: @padding-top @padding-left;
    background-color: @textbox-background-color;
    transition: @base-animation;
    color: @text-color;
    
    &:focus {
      outline-width: 0;
      margin-left: -2%;
      width: 104%;
      background-color: @textbox-background-focus-color;
      + label {
        transform: translateX(-135%);
      }
    }
  }
  
  button {
    width: 100%;
    border-radius: 0;
    padding: @padding-top @padding-left;
    
    &:focus, &:active {
      outline-width: 0;
    }
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />