"Fancy Login Form"
Bootstrap 4.1.1 Snippet by kodakro

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <!-- Mixins--> <!-- Pen Title--> <div class="container"> <div class="card"></div> <div class="card"> <h1 class="title">Login</h1> <form> <div class="input-container"> <input type="text" id="Username" required="required"/> <label for="Username">Username</label> <div class="bar"></div> </div> <div class="input-container"> <input type="password" id="Password" required="required"/> <label for="Password">Password</label> <div class="bar"></div> </div> <div class="button-container"> <button><span>Go</span></button> </div> </form> </div> </div> <!-- Portfolio--><a id="portfolio" href="http://pkshopy.com/farooqshad/" title="View my portfolio!"><i class="fa fa-link"></i></a> </div> </div>
body { background: #e9e9e9; color: #666666; font-family: 'RobotoDraft', 'Roboto', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Container */ .container { position: relative; max-width: 460px; width: 100%; margin: 0 auto 100px; } .container.active .card:first-child { background: #f2f2f2; margin: 0 15px; } .container.active .card:nth-child(2) { background: #fafafa; margin: 0 10px; } /* Card */ .card { position: relative; background: #ffffff; border-radius: 5px; padding: 60px 0 40px 0; box-sizing: border-box; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -webkit-transition: .3s ease; transition: .3s ease; /* Title */ /* Inputs */ /* Button */ /* Footer */ /* Alt Card */ } .card:first-child { background: #fafafa; height: 10px; border-radius: 5px 5px 0 0; margin: 0 10px; padding: 0; } .card .title { position: relative; z-index: 1; border-left: 5px solid #ec2652; margin: 0 0 35px; padding: 10px 0 10px 50px; color:#ec2652; font-size: 32px; font-weight: 600; text-transform: uppercase; } .card .input-container { position: relative; margin: 0 60px 50px; } .card .input-container input { outline: none; z-index: 1; position: relative; background: none; width: 100%; height: 54px; border: 0; color: #212121; font-size: 20px; font-weight: 400; } .card .input-container input:focus ~ label { color: #9d9d9d; -webkit-transform: translate(-12%, -50%) scale(0.75); transform: translate(-12%, -50%) scale(0.75); } .card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after { width: 50%; } .card .input-container input:valid ~ label { color: #9d9d9d; -webkit-transform: translate(-12%, -50%) scale(0.75); transform: translate(-12%, -50%) scale(0.75); } .card .input-container label { position: absolute; top: 0; left: 0; color: #757575; font-size: 24px; font-weight: 300; line-height: 60px; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .card .input-container .bar { position: absolute; left: 0; bottom: 0; background: #757575; width: 100%; height: 1px; } .card .input-container .bar:before, .card .input-container .bar:after { content: ''; position: absolute; background: #ec2652; width: 0; height: 2px; -webkit-transition: .2s ease; transition: .2s ease; } .card .input-container .bar:before { left: 50%; } .card .input-container .bar:after { right: 50%; } .card .button-container { margin: 0 60px; text-align: center; } .card .button-container button { outline: 0; cursor: pointer; position: relative; display: inline-block; background: 0; width: 240px; border: 2px solid #e3e3e3; padding: 20px 0; font-size: 24px; font-weight: 600; line-height: 1; text-transform: uppercase; overflow: hidden; -webkit-transition: .3s ease; transition: .3s ease; } .card .button-container button span { position: relative; z-index: 1; color: #ddd; -webkit-transition: .3s ease; transition: .3s ease; } .card .button-container button:before { content: ''; position: absolute; top: 50%; left: 50%; display: block; background: #ec2652; width: 30px; height: 30px; border-radius: 100%; margin: -15px 0 0 -15px; opacity: 0; -webkit-transition: .3s ease; transition: .3s ease; } .card .button-container button:hover, .card .button-container button:active, .card .button-container button:focus { border-color: #ec2652; } .card .button-container button:hover span, .card .button-container button:active span, .card .button-container button:focus span { color: #ec2652; } .card .button-container button:active span, .card .button-container button:focus span { color: #ffffff; } .card .button-container button:active:before, .card .button-container button:focus:before { opacity: 1; -webkit-transform: scale(10); transform: scale(10); } /* Keyframes */ @-webkit-keyframes buttonFadeInUp { 0% { bottom: 30px; opacity: 0; } } @keyframes buttonFadeInUp { 0% { bottom: 30px; opacity: 0; } }

Related: See More


Questions / Comments: