7.4K views
1.login-box { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 width: 400px; 6 padding: 40px; 7 margin: 20px auto; 8 transform: translate(-50%, -55%); 9 background: rgba(0,0,0,.9); 10 box-sizing: border-box; 11 box-shadow: 0 15px 25px rgba(0,0,0,.6); 12 border-radius: 10px; 13} 14 15.login-box p:first-child { 16 margin: 0 0 30px; 17 padding: 0; 18 color: #fff; 19 text-align: center; 20 font-size: 1.5rem; 21 font-weight: bold; 22 letter-spacing: 1px; 23} 24 25.login-box .user-box { 26 position: relative; 27} 28 29.login-box .user-box input { 30 width: 100%; 31 padding: 10px 0; 32 font-size: 16px; 33 color: #fff; 34 margin-bottom: 30px; 35 border: none; 36 border-bottom: 1px solid #fff; 37 outline: none; 38 background: transparent; 39} 40 41.login-box .user-box label { 42 position: absolute; 43 top: 0; 44 left: 0; 45 padding: 10px 0; 46 font-size: 16px; 47 color: #fff; 48 pointer-events: none; 49 transition: .5s; 50} 51 52.login-box .user-box input:focus ~ label, 53.login-box .user-box input:valid ~ label { 54 top: -20px; 55 left: 0; 56 color: #fff; 57 font-size: 12px; 58} 59 60.login-box form a { 61 position: relative; 62 display: inline-block; 63 padding: 10px 20px; 64 font-weight: bold; 65 color: #fff; 66 font-size: 16px; 67 text-decoration: none; 68 text-transform: uppercase; 69 overflow: hidden; 70 transition: .5s; 71 margin-top: 40px; 72 letter-spacing: 3px 73} 74 75.login-box a:hover { 76 background: #fff; 77 color: #272727; 78 border-radius: 5px; 79} 80 81.login-box a span { 82 position: absolute; 83 display: block; 84} 85 86.login-box a span:nth-child(1) { 87 top: 0; 88 left: -100%; 89 width: 100%; 90 height: 2px; 91 background: linear-gradient(90deg, transparent, #fff); 92 animation: btn-anim1 1.5s linear infinite; 93} 94 95@keyframes btn-anim1 { 96 0% { 97 left: -100%; 98 } 99 100 50%,100% { 101 left: 100%; 102 } 103} 104 105.login-box a span:nth-child(2) { 106 top: -100%; 107 right: 0; 108 width: 2px; 109 height: 100%; 110 background: linear-gradient(180deg, transparent, #fff); 111 animation: btn-anim2 1.5s linear infinite; 112 animation-delay: .375s 113} 114 115@keyframes btn-anim2 { 116 0% { 117 top: -100%; 118 } 119 120 50%,100% { 121 top: 100%; 122 } 123} 124 125.login-box a span:nth-child(3) { 126 bottom: 0; 127 right: -100%; 128 width: 100%; 129 height: 2px; 130 background: linear-gradient(270deg, transparent, #fff); 131 animation: btn-anim3 1.5s linear infinite; 132 animation-delay: .75s 133} 134 135@keyframes btn-anim3 { 136 0% { 137 right: -100%; 138 } 139 140 50%,100% { 141 right: 100%; 142 } 143} 144 145.login-box a span:nth-child(4) { 146 bottom: -100%; 147 left: 0; 148 width: 2px; 149 height: 100%; 150 background: linear-gradient(360deg, transparent, #fff); 151 animation: btn-anim4 1.5s linear infinite; 152 animation-delay: 1.125s 153} 154 155@keyframes btn-anim4 { 156 0% { 157 bottom: -100%; 158 } 159 160 50%,100% { 161 bottom: 100%; 162 } 163} 164 165.login-box p:last-child { 166 color: #aaa; 167 font-size: 14px; 168} 169 170.login-box a.a2 { 171 color: #fff; 172 text-decoration: none; 173} 174 175.login-box a.a2:hover { 176 background: transparent; 177 color: #aaa; 178 border-radius: 5px; 179}
glisovic01
Filip Glišović
I am a student of the Faculty of Mechanical Engineering, and from an early age I have been interested in programming and working in the field of technology.
MIT License