<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="main dflex"> <div class="login dflex"> <h1>Login</h1> <form action="" class="login_form"> <div class="input_bg"> <input class="login_input" type="text" placeholder="Username"> </div> <div class="input_bg"> <input class="login_input" type="password" placeholder="Password"> </div> <div class="submit_bg"> <input type="submit" value="SUBMIT"> </div> </form> </div> </div>

body { padding: 0; margin: 0 } * { outline: none; font-family: cursive } .dflex { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; align-content: center; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column } .main { height: 100vh; width: 100vw; background-image: linear-gradient(to right top, #38438b, #944b94, #d75a88, #ff7e71, #ffb25f, #ffeb68) } .login { text-align: center; height: 70vh; width: 500px; margin: 0 auto; background: #37474F; border-radius: 5%; box-shadow: 0px 0px 20px 3px #000 } .login_form { padding: 10px } .input_bg { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 60% } .submit_bg, .input_bg { margin: 0 auto 3em; background: linear-gradient(to right top, #ffeb68, #ffb25f, #ff7e71, #d75a88, #944b94, #38438b); padding: 2px; border-radius: 50px } .submit_bg { margin: 0 auto; width: 25% } .login_input { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; background-color: transparent; height: 30px; border-style: solid; border-color: transparent; background-color: #37474F; width: 91%; padding: 2px 10px; border-radius: 45px; color: #fff } .login_input::placeholder { color: #fff } .login_input:focus .input_bg { width: 100% } .login_form input[type="submit"]:hover { cursor: pointer } .login_form input[type="submit"] { color: #fff; display: block; height: 35px; width: 100%; background: #37474F; border: 2px solid transparent; border-radius: 50px; padding: 2px 10px } .login h1 { color: #fff; margin-top: 0; font-size: 40px } @media(max-width:767px) { .login { height: 60vh } } @media(max-width:568px) { .login { width: 80% } } @media(max-width:480px) { .input_bg { width: 80% } } @media(max-width:360px) { .login { width: 92% } .submit_bg, .input_bg { margin: 0 auto 2em } .login_input { width: 89% } }