#212121
1.login-box { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 width: 400px; 6 padding: 40px; 7 transform: translate(-50%, -50%); 8 background: rgba(24, 20, 20, 0.987); 9 box-sizing: border-box; 10 box-shadow: 0 15px 25px rgba(0,0,0,.6); 11 border-radius: 10px; 12} 13 14.login-box .user-box { 15 position: relative; 16} 17 18.login-box .user-box input { 19 width: 100%; 20 padding: 10px 0; 21 font-size: 16px; 22 color: #fff; 23 margin-bottom: 30px; 24 border: none; 25 border-bottom: 1px solid #fff; 26 outline: none; 27 background: transparent; 28} 29 30.login-box .user-box label { 31 position: absolute; 32 top: 0; 33 left: 0; 34 padding: 10px 0; 35 font-size: 16px; 36 color: #fff; 37 pointer-events: none; 38 transition: .5s; 39} 40 41.login-box .user-box input:focus ~ label, 42.login-box .user-box input:valid ~ label { 43 top: -20px; 44 left: 0; 45 color: #bdb8b8; 46 font-size: 12px; 47} 48 49.login-box form a { 50 position: relative; 51 display: inline-block; 52 padding: 10px 20px; 53 color: #ffffff; 54 font-size: 16px; 55 text-decoration: none; 56 text-transform: uppercase; 57 overflow: hidden; 58 transition: .5s; 59 margin-top: 40px; 60 letter-spacing: 4px 61} 62 63.login-box a:hover { 64 background: #03f40f; 65 color: #fff; 66 border-radius: 5px; 67 box-shadow: 0 0 5px #03f40f, 68 0 0 25px #03f40f, 69 0 0 50px #03f40f, 70 0 0 100px #03f40f; 71} 72 73.login-box a span { 74 position: absolute; 75 display: block; 76} 77 78@keyframes btn-anim1 { 79 0% { 80 left: -100%; 81 } 82 83 50%,100% { 84 left: 100%; 85 } 86} 87 88.login-box a span:nth-child(1) { 89 bottom: 2px; 90 left: -100%; 91 width: 100%; 92 height: 2px; 93 background: linear-gradient(90deg, transparent, #03f40f); 94 animation: btn-anim1 2s linear infinite; 95}
24K views
24K views
Comments
MIT License