<form> <h1>Login or Register</h1> <p> <label for="login">Username or email</label> <input type="text" name="login" id="login" placeholder="john.doe@gmail.com" autocomplete="off" required> </p> <p> <label for="password">Password</label> <input type="password" name='password' id="password" placeholder="The longer the better" required> </p> <p> <button type="button">Continue</button> </p> </form>html { box-sizing: border-box;}* { box-sizing: inherit;}form { border: .5em solid lighten(deepskyblue, 30%); border-radius: .2em; max-width: 400px; margin: 3em auto; padding: 1em;}h1 { font-size: 2em; margin-top: 0;}label { display: block; margin-bottom: .5em; cursor: pointer;}input[type="text"],input[type="password"] { display: block; width: 100%; padding: .5em; transition: .5s ease-out; // Thanks to Fabrizio Calderan for improving the effect &:focus { transform: scale(1.75); outline: 100em solid rgba(black, .75); }}button { display: block; border: none; padding: 1em; width: 100%; font-weight: bold; color: white; background: deepskyblue; text-transform: uppercase; font-size: .8em; transition: .15s ease-out; &:hover { background: #888; }}p:last-of-type { margin-bottom: 0;}xxxxxxxxxx