<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2 class="text-center">Stylish Form</h2> <input placeholder="Username" type="text" required> <input placeholder="Password" type="password" required> <button class="btn primary-button">Submit</button> </div> </div>

input { margin: 40px 25px; width: 200px; display: block; border: none; padding: 10px 0; border-bottom: solid 1px #1abc9c; -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%); background-position: -200px 0; background-size: 200px 100%; background-repeat: no-repeat; color: #0e6252; } input:focus, input:valid { box-shadow: none; outline: none; background-position: 0 0; } input::-webkit-input-placeholder { font-family: 'roboto', sans-serif; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder { color: #1abc9c; font-size: 11px; -webkit-transform: translateY(-20px); transform: translateY(-20px); visibility: visible !important; }