Input by Akshdeep74644
#e8e8e8
1.container { 2 position: relative; 3 width: 200px; 4} 5 6.container input { 7 width: 100%; 8 background: transparent; 9 outline: none; 10 border: none; 11 color: #222; 12 padding: 8px; 13} 14 15.container label { 16 position: absolute; 17 left: 0; 18 top: 0; 19 color: rgba(105, 105, 105, 0.7); 20 text-transform: uppercase; 21 pointer-events: none; 22 transition: .5s; 23 font-weight: bold; 24} 25 26.container input:valid ~ label, 27.container input:focus ~ label { 28 color: rgb(10, 131, 212); 29 transform: translateY(-15px); 30 font-size: .6rem; 31} 32 33.container i { 34 position: absolute; 35 left: 0; 36 bottom: 0; 37 width: 100%; 38 height: 2px; 39 background: #222; 40} 41 42.container i:before { 43 content: ''; 44 position: absolute; 45 width: 100%; 46 height: 100%; 47 background: linear-gradient(90deg, #ff1b69, #ff0, #2196f3, #9c27b0, #ff1b69); 48 animation: animate 3s linear infinite; 49}
4.8K views
4.8K views
MIT License