367 views
CSSAdd prefixes
1.form { 2 position: absolute; 3 display: flex; 4 flex-direction: column; 5 gap: 10px; 6 padding-top: 3em; 7 padding-left: 2.8em; 8 padding-right: 2.8em; 9 padding-bottom: 2.1em; 10 border: 2px dashed #DAA06D; 11 border-radius: 15px; 12 background-color: #EADDCA; 13 box-shadow: 0 0 0 4px #EADDCA, 2px 2px 4px 2px rgba(0, 0, 0, 0.5); 14 transition: .4s ease-in-out; 15} 16 17::placeholder { 18 color: #DAA06D; 19 text-align: center; 20} 21 22.form .heading { 23 padding-left: 0.8em; 24 color: #DAA06D; 25 background-color: transparent; 26 letter-spacing: .5em; 27 text-align: center; 28 padding-top: 1em; 29 padding-bottom: 3em; 30 text-shadow: inset -1px -1px 1px #DAA06D; 31} 32 33.form .input { 34 outline: none; 35 padding: 0.5em; 36 border: 1px solid #DAA06D; 37 color: #DAA06D; 38 width: 14em; 39 height: 3em; 40 border-radius: 10px; 41 background-color: #EADDCA; 42 text-align: center; 43} 44 45.form .btn { 46 align-self: center; 47 margin-top: 2em; 48 border-radius: 10px; 49 outline: none; 50 border: none; 51 color: white; 52 background-color: #E5AA70; 53 font-weight: bold; 54 letter-spacing: 0.1em; 55 transition: .4s ease-in-out opacity,.1s ease-in-out active; 56 padding: 1em; 57 box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5); 58} 59 60.form .btn:hover { 61 opacity: 0.8; 62} 63 64.form .btn:active { 65 transform: translateX(0.1em) translateY(0.1em); 66 box-shadow: none; 67}
HTML
1<form class="form"> 2 <p class="heading">LOGIN</p> 3 <input type="text" class="input" placeholder="Username"> 4 <input type="password" class="input" placeholder="Password"> 5 <button class="btn">Submit</button> 6</form>