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