1 
2<div class="input-group">
3  <input placeholder="Enter new item here" type="text" id="input-field">
4  <button class="submit-button"><span>ADD</span></button>
5</div>          

 1 
 2.input-group {
 3  display: flex;
 4  flex-direction: row;
 5  margin: 0 auto;
 6  justify-content: center;
 7  max-width: 160px;
 8}
 9 
10.submit-button {
11  font-size: 17px;
12  padding: 0.5em 2em;
13  border: transparent;
14  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24);
15  background: #2E2E2E;
16  border-radius: 0 10px 10px 0;
17  transition: 0.3s;
18}
19 
20.submit-button:hover {
21  transition: 0.3s;
22  background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
23  cursor: pointer;
24}
25 
26.submit-button:active {
27  transform: translate(0em, 0.2em);
28}
29 
30.submit-button span {
31  font-weight: 800;
32  letter-spacing: 2px;
33  background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
34  -webkit-background-clip: text;
35  -webkit-text-fill-color: transparent;
36  transition: 0.3s;
37}
38 
39.submit-button:hover span {
40  background: #2E2E2E;
41  -webkit-background-clip: text;
42  -webkit-text-fill-color: transparent;
43  transition: 0.3s;
44}
45 
46#input-field {
47  background-color: #2E2E2E;
48  border-radius: 10px 0 0 10px;
49  border: none;
50  width: 300px;
51  padding-left: 8px;
52  color: white;
53  font-size: 14px;
54  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
55}
56 
57::placeholder {
58  color: rgb(184, 184, 184);
59}