Material Input Ripple - Exploration

by Kyle Mitofsky

HTML

<div class="form-group">
  <label for="">First Name:</label>
  <input type="text" class="form-control">
</div>

<div class="form-group">
  <label for="">Last Name:</label>
  <input type="text" class="form-control">
</div>





























<div style='position:fixed;bottom:0;left:0; background:#ececec;width:100%;padding:3px;'>
  <a href='https://material.io/guidelines/components/text-fields.html#text-fields-states'>
    Material Design Docs
  </a><br/>
  <a href='https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html'>
    FezVrasta Material Design
  </a><br/>
  <a href='https://github.com/FezVrasta/bootstrap-material-design/blob/v0.5.10/less/_inputs.less#L213'>
    FezVrasta - Source Code
  </a><br/>  
</div>

CSS

.form-group {
  padding: 15px;
}


.form-control {
    border: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    background-color: rgba(0, 0, 0, 0);
    
    background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#009688)),
                      -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2));
    background-image: -webkit-linear-gradient(#009688, #009688), -webkit-linear-gradient(#D2D2D2, #D2D2D2);
    background-image:      -o-linear-gradient(#009688, #009688),      -o-linear-gradient(#D2D2D2, #D2D2D2);
    background-image:         linear-gradient(#009688, #009688),         linear-gradient(#D2D2D2, #D2D2D2);
    background-repeat: no-repeat;
    background-position: center bottom, center -webkit-calc(100% - 1px);
    background-position: center bottom, center         calc(100% - 1px);
    
    -webkit-background-size: 0% 2px, 100% 1px;
            background-size: 0% 2px, 100% 1px;
    
    -webkit-transition: background 0s ease-out;
         -o-transition: background 0s ease-out;
            transition: background 0s ease-out;         

    
}
.form-control:focus {
    outline: none;
    -webkit-background-size: 100% 2px, 100% 1px;
            background-size: 100% 2px, 100% 1px;
    -webkit-transition-duration: 0.3s;
         -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
}