Form by MikeAndrewDesigner
#212121
1.login { 2 width: 340px; 3 height: 400px; 4 background: #2c2c2c; 5 padding: 47px; 6 padding-bottom: 57px; 7 color: #fff; 8 border-radius: 17px; 9 padding-bottom: 50px; 10 font-size: 1.3em; 11 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 12} 13 14.login input[type="text"], 15.login input[type="password"] { 16 opacity: 1; 17 display: block; 18 border: none; 19 outline: none; 20 width: 100%; 21 padding: 13px 18px; 22 margin: 20px 0 0 0; 23 font-size: 0.8em; 24 border-radius: 100px; 25 background: #3c3c3c; 26 color: #fff; 27} 28 29.login input:focus { 30 animation: bounce 1s; 31 -webkit-appearance: none; 32} 33 34.login input[type=submit], 35.login input[type=button], 36.h1 { 37 border: 0; 38 outline: 0; 39 width: 100%; 40 padding: 13px; 41 margin: 40px 0 0 0; 42 border-radius: 500px; 43 font-weight: 600; 44 animation: bounce2 1.6s; 45} 46 47.h1 { 48 padding: 0; 49 position: relative; 50 top: -35px; 51 display: block; 52 margin-bottom: -0px; 53 font-size: 1.3em; 54} 55 56.btn { 57 background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb); 58 color: #fff; 59 padding: 16px !important; 60} 61 62.btn:hover { 63 background: linear-gradient(144deg, #1e1e1e , 20%,#1e1e1e 50%,#1e1e1e ); 64 color: rgb(255, 255, 255); 65 padding: 16px !important; 66 cursor: pointer; 67 transition: all 0.4s ease; 68} 69 70.login input[type=text] { 71 animation: bounce 1s; 72 -webkit-appearance: none; 73} 74 75.login input[type=password] { 76 animation: bounce1 1.3s; 77} 78 79.ui { 80 font-weight: bolder; 81 background: -webkit-linear-gradient(#B563FF, #535EFC, #0EC8EE); 82 -webkit-background-clip: text; 83 -webkit-text-fill-color: transparent; 84 border-bottom: 4px solid transparent; 85 border-image: linear-gradient(0.25turn, #535EFC, #0EC8EE, #0EC8EE); 86 border-image-slice: 1; 87 display: inline; 88} 89 90@media only screen and (max-width: 600px) { 91 .login { 92 width: 70%; 93 padding: 3em; 94 } 95} 96 97@keyframes bounce { 98 0% { 99 transform: translateY(-250px); 100 opacity: 0; 101 } 102} 103 104@keyframes bounce1 { 105 0% { 106 opacity: 0; 107 } 108 109 40% { 110 transform: translateY(-100px); 111 opacity: 0; 112 } 113} 114 115@keyframes bounce2 { 116 0% { 117 opacity: 0; 118 } 119 120 70% { 121 transform: translateY(-20px); 122 opacity: 0; 123 } 124}
2.5K views
2.5K views
MIT License