<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <section id="register"> <div class="container"> <div class="form-content"> <div class="tabbable-panel"> <div class="tabbable-line"> <ul class="nav nav-tabs "> <li class="active"><a href="#tab_default_1" data-toggle="tab">Tab 1 </a></li> <li><a href="#tab_default_2" data-toggle="tab">Tab 2 </a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_default_1"> <form action="" method="" id="contactFrm" name=""> <fieldset> <div class="form-group row"> <div class="col-md-4 text-left"> <label for="Email">email address: </label> </div> <div class="col-md-8"> <input class="form-control" id="Email" type="text" required> </div> </div> <div class="form-group row"> <div class="col-md-4 text-left"> <label for="Password">Password:</label> </div> <div class="col-md-8"> <input class="form-control" id="Password" type="password" required> </div> </div> <div class="row"> <div class="col-md-offset-4 col-md-7 text-left"> <div class="checkbox-wrap"> <input name="remember" id="rem" value="" type="checkbox"> <label for="rem">remember me</label> </div> </div> </div> </fieldset> <div class="login"> <button name="submit" class="border-button">login</button> </div> <div class="meta-text text-left"> <p>don’t have an account? <a href="">register now</a></p> <p>forgotten your password? <a href="">reset here</a></p> </div> </form> </div> <div class="tab-pane" id="tab_default_2"> <form action="" method="" id="contactFrm" name=""> <fieldset> <div class="form-group row"> <div class="col-md-4 text-left"> <label for="Email">email address2: </label> </div> <div class="col-md-8"> <input class="form-control" id="Email" type="text" required> </div> </div> <div class="form-group row"> <div class="col-md-4 text-left"> <label for="Password">Password:</label> </div> <div class="col-md-8"> <input class="form-control" id="Password" type="password" required> </div> </div> <div class="row"> <div class="col-md-offset-4 col-md-7 text-left"> <div class="checkbox-wrap"> <input name="remember" id="rem" value="" type="checkbox"> <label for="rem">remember me</label> </div> </div> </div> </fieldset> <div class="login"> <button name="submit" class="border-button">login</button> </div> <div class="meta-text text-left"> <p>don’t have an account? <a href="">register now</a></p> <p>forgotten your password? <a href="">reset here</a></p> </div> </form> </div> </div> </div> </div> </div> </div> </section>

@import url('https://fonts.googleapis.com/css?family=Open+Sans'); #register .form-content .tabbable-panel { text-align: center; } #register .form-content .tabbable-panel .nav-tabs { border: none; display: inline-block; margin: 0 0 2rem 0; } #register .form-content .tabbable-panel .nav-tabs li a { border: none; font: 600 20px/24px open sans; padding: 10px 44px; background: transparent; position: relative; margin: 0; cursor: pointer; display: block; z-index: 999; } #register .form-content .tabbable-panel .nav-tabs li { position: relative; overflow: hidden; } #register .form-content .tabbable-panel .nav-tabs li:first-of-type::after { content: ''; right: -50%; position: absolute; top: 19%; height: 27px; width: 100px; background: #46c5fd; border-radius: 50px; overflow: hidden; } #register .form-content .tabbable-panel .nav-tabs li:first-of-type.active::before { content: ''; right: 7px; position: absolute; top: 23%; height: 22px; width: 22px; background: #fff; border-radius: 50px; overflow: hidden; z-index: 9; transition:500ms; } #register .form-content .tabbable-panel .nav-tabs li:last-of-type.active::before { content: ''; left: 5px; position: absolute; top: 23%; height: 22px; width: 22px; background: #fff; border-radius: 50px; overflow: hidden; z-index: 9; transition:500ms; } #register .form-content .tabbable-panel .nav-tabs li:last-of-type::after { content: ''; left: -50%; position: absolute; top: 19%; height: 27px; width: 100px; background: #46c5fd; border-radius: 50px; overflow: hidden; } #login .form-content p,#register .form-content p { font: 400 17px/21px open sans; } #login .form-content .text-wrap,#register .form-content .text-wrap { margin: 0 0 2rem 0; } #login .form-content,#register .form-content { width: 70%; margin: 0 auto; } #login .form-content form,#register .form-content form { width: 60%; margin: 0 auto; } #login .form-content p, #login .form-content label,#register .form-content p, #register .form-content label { font: 400 17px/30px open sans; } #login .form-content form input, #register .form-content form input { background: #e7e8e8; border: none; box-shadow: none; } #login .form-content form .login .border-button ,#register .form-content form .login .border-button { height: auto; font: 700 24px/22px open sans; padding: 15px 32px; box-shadow: none; width: auto; border: none; background: #46c5fd; color: #fff; text-transform: lowercase; text-shadow: 1px 1px 1px rgba(0,0,0,.75); border-radius: 5px; margin: 0 0 15px 0; } #login .form-content form fieldset,#register .form-content form fieldset { margin: 0 0 15px 0; } #login .form-content p a,#register .form-content p a { color: #46c5fd; } #login,#register { padding: 1% 0 2% 0; }