#e8e8e8
1/* you can choose any color you want. don't be afraid to experiment */ 2 3.input, button { 4 width: 100%; 5 height: 40px; 6 position: relative; 7 padding: 10px; 8 border: 0.1px solid #575cb5; 9} 10 11button { 12 background: #6d74e3; 13 border: none; 14} 15 16.wrapper { 17 position: relative; 18 transform: skewY(-14deg); 19} 20 21.wrapper li, button { 22 position: relative; 23 list-style: none; 24 width: 200px; 25 z-index: var(--i); 26 transition: 0.3s; 27 color: white; 28} 29 30.wrapper li::before, button::before { 31 position: absolute; 32 content: ''; 33 background: #6d74e3; 34 top: 0; 35 left: -40px; 36 width: 40px; 37 height: 40px; 38 transform-origin: right; 39 transform: skewY(45deg); 40 transition: 0.3s; 41} 42 43.wrapper li::after, button::after { 44 position: absolute; 45 content: ''; 46 background: #6d74e3; 47 width: 200px; 48 height: 40px; 49 top: -40px; 50 left: 0; 51 transform-origin: bottom; 52 transform: skewX(45deg); 53 transition: 0.3s; 54} 55 56.wrapper li:nth-child(1)::after, .wrapper li:nth-child(1)::before { 57 background-color: #d8daf7; 58} 59 60.wrapper li:nth-child(2)::after, .wrapper li:nth-child(2)::before { 61 background-color: #c2c5f3; 62} 63 64.wrapper li:nth-child(3)::after, .wrapper li:nth-child(3)::before { 65 background-color: #989deb; 66} 67 68li .input { 69 outline: none; 70 border: none; 71 color: black; 72} 73 74li .input::placeholder { 75 color: black; 76} 77 78li:nth-child(1) .input { 79 background: #d8daf7; 80} 81 82li:nth-child(2) .input { 83 background: #c2c5f3; 84} 85 86li:nth-child(3) .input { 87 background: #989deb; 88} 89 90 91li:nth-child(1) .input:focus { 92 outline: none; 93 border: 3.5px solid #d8daf7; 94} 95 96li:nth-child(2) .input:focus { 97 outline: none; 98 border: 3.5px solid #c2c5f3; 99} 100 101li:nth-child(3) .input:focus { 102 outline: none; 103 border: 3.5px solid #989deb; 104} 105 106.wrapper li:hover, button:hover { 107 transform: translateX(-20px); 108} 109 110button:hover, button:hover::before, button:hover::after { 111 background: #575cb5; 112} 113 114button:active { 115 transform: translateX(0px); 116} 117 118
Comments
1fedeminatta 8. August at 17:07
8. August at 17:07
Nice form Bro 😼
MIT License