<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--https://codepen.io/sevilayha/pen/IdGKH--> <div class="container"> <div class="row"> <div class="col-sm-4 get_form_inner"> <h4 class="__head">Register as a New Trainer</h4> <!-- ngIf: social_error_message != undefined --> <div class="text-center"> <div class="row "> <div class="col-sm-12"> <button type="button" class="btn btn-social btn-block btn-facebook" onclick="onLinkedInLoad('signup')"> <i class="fa fa-linkedin"></i> Sign up with Linkedin </button> </div> </div> </div> <hr class="ortext2"> <p></p> <form name="registerForm" method="post" action=""> <div class="group"> <input type="text" name="FirstName" required="required"> <span class="highlight"></span> <span class="bar"></span><label>First Name</label> </div> <div class="group"> <input type="text" name="LastName" required="required"> <span class="highlight"></span> <span class="bar"></span><label>Last Name</label> </div> <div class="group"> <input type="email" name="Email" required=""> <span class="smessage"></span> <span class="highlight"></span> <span class="bar"></span><label>Email Adress</label> </div> <div class="group"> <input type="number" name="Phone" required="required"> <span class="highlight"></span> <span class="bar"></span><label>Phone Number</label> </div> <div class="group"> <input type="password" name="password" required="required"><input type="hidden" name="profile" value="Trainer"> <span class="highlight"></span> <span class="bar"></span><label>Password</label> </div> <div class="form-group text-right">By signing up, you agree to our <br><a href="" target="_blank">T&C</a> and <a href="" target="_blank">privacy policy</a></div> <div class="form-group text-center"> <div> <button type="submit" class="btn btn-info">Sign-up Now</button> </div> <div class="container-fluid loading hidden"> <label><span class="fa fa-refresh fa-spin"></span>  Signing up...</label> </div> </div> <div class="text-right"> <p class="text-right">Already Registered? <a href="javascript:void(0);" data-toggle="modal" data-target="#login">Login here</a></p> </div> </form> </div> </div> </div>

.group{ position:relative; margin-bottom:20px; } .group input { font-size:18px; padding:7px 7px 5px 2px; display:block; width:100%; border:none; border-bottom:1px solid #757575; } .group input:focus { outline:none; } /* LABEL ======================================= */ .group label { color:#fff; font-size:18px; font-weight:normal; position:absolute; pointer-events:none; left:5px; top:10px; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } /* active state */ .group input:focus ~ label, input:valid ~ label { top:-15px; font-size:14px; color:#5264AE; } /* BOTTOM BARS ================================= */ .group .bar { position:relative; display:block; width:300px; } .group .bar:before, .bar:after { content:''; height:2px; width:0; bottom:1px; position:absolute; background:#5264AE; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } .group .bar:before { left:50%; } .group .bar:after { right:50%; } /* active state */ .group input:focus ~ .bar:before, input:focus ~ .bar:after { width:50%; } /* HIGHLIGHTER ================================== */ .group .highlight { position:absolute; height:60%; width:100px; top:25%; left:0; pointer-events:none; opacity:0.5; } /* active state */ .group input:focus ~ .highlight { -webkit-animation:inputHighlighter 0.3s ease; -moz-animation:inputHighlighter 0.3s ease; animation:inputHighlighter 0.3s ease; } /* ANIMATIONS ================ */ @-webkit-keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } @-moz-keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } @keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } }