Input by devkatyall
#212121
1.input { 2 display: block; 3} 4.to-do-input { 5 color: rgb(133, 198, 255); 6 display: block; 7 max-width: 190px; 8 height: 2.7em; 9 padding: 1em 1em; 10 font-family: "Instrument Sans", sans-serif; 11 border: none; 12 border-radius: 4px; 13 background-color: black; 14} 15.to-do-input:focus { 16 outline: none; 17} 18.todo-line { 19 z-index: 2; 20 position: absolute; 21 margin-top: -2px; 22 width: 216px; 23 height: 2px; 24 border-radius: 4px; 25 background-color: black; 26} 27.to-do-input:focus ~ .todo-line { 28 animation: draw 0.3s ease-in; 29 background: rgb(49, 228, 255); 30} 31@keyframes draw { 32 0% { 33 opacity: 0; 34 width: 0px; 35 filter: hue-rotate(0deg); 36 } 37 100% { 38 opacity: 1; 39 width: 200px; 40 filter: hue-rotate(360deg); 41 } 42} 43.input.button { 44 border-top-right-radius: 4px; 45 border-bottom-right-radius: 4px; 46 display: flex; 47 height: 2.7em; 48 padding: 1em 1em; 49 align-items: center; 50 background-color: black; 51 border: none; 52 color: white; 53 transform: translateX(-4px); 54 cursor: pointer; 55 transition: 0.5s all; 56} 57.input.button:active { 58 background-color: rgb(49, 228, 255); 59 transition: 0.5s all; 60} 61
202 views
202 views
MIT License