1 
 2<div class="input__container">
 3  <div class="shadow__input"></div>
 4  <button class="input__button__shadow">
 5    <svg
 6      xmlns="http://www.w3.org/2000/svg"
 7      viewBox="0 0 24 24"
 8      fill="#000000"
 9      width="20px"
10      height="20px"
11    >
12      <path d="M0 0h24v24H0z" fill="none"></path>
13      <path
14        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
15      ></path>
16    </svg>
17  </button>
18  <input
19    type="text"
20    name="username"
21    class="input__search"
22    placeholder="Enter username"
23  />
24</div>          

  1 
  2.input__container {
  3  position: relative;
  4  background: #f0f0f0;
  5  padding: 20px;
  6  display: flex;
  7  justify-content: flex-start;
  8  align-items: center;
  9  gap: 15px;
 10  border: 4px solid #000;
 11  max-width: 350px;
 12  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
 13  transform-style: preserve-3d;
 14  transform: rotateX(10deg) rotateY(-10deg);
 15  perspective: 1000px;
 16  box-shadow: 10px 10px 0 #000;
 17}
 18 
 19.input__container:hover {
 20  transform: rotateX(5deg) rotateY(1 deg) scale(1.05);
 21  box-shadow: 25px 25px 0 -5px #e9b50b, 25px 25px 0 0 #000;
 22}
 23 
 24.shadow__input {
 25  content: "";
 26  position: absolute;
 27  width: 100%;
 28  height: 100%;
 29  left: 0;
 30  bottom: 0;
 31  z-index: -1;
 32  transform: translateZ(-50px);
 33  background: linear-gradient(
 34    45deg,
 35    rgba(255, 107, 107, 0.4) 0%,
 36    rgba(255, 107, 107, 0.1) 100%
 37  );
 38  filter: blur(20px);
 39}
 40 
 41.input__button__shadow {
 42  cursor: pointer;
 43  border: 3px solid #000;
 44  background: #e9b50b;
 45  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
 46  display: flex;
 47  justify-content: center;
 48  align-items: center;
 49  padding: 10px;
 50  transform: translateZ(20px);
 51  position: relative;
 52  z-index: 3;
 53  font-weight: bold;
 54  text-transform: uppercase;
 55}
 56 
 57.input__button__shadow:hover {
 58  background: #e9b50b;
 59  transform: translateZ(10px) translateX(-5px) translateY(-5px);
 60  box-shadow: 5px 5px 0 0 #000;
 61}
 62 
 63.input__button__shadow svg {
 64  fill: #000;
 65  width: 25px;
 66  height: 25px;
 67}
 68 
 69.input__search {
 70  width: 100%;
 71  outline: none;
 72  border: 3px solid #000;
 73  padding: 15px;
 74  font-size: 18px;
 75  background: #fff;
 76  color: #000;
 77  transform: translateZ(10px);
 78  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
 79  position: relative;
 80  z-index: 3;
 81  font-family: "Roboto", Arial, sans-serif;
 82  letter-spacing: -0.5px;
 83}
 84 
 85.input__search::placeholder {
 86  color: #666;
 87  font-weight: bold;
 88  text-transform: uppercase;
 89}
 90 
 91.input__search:hover,
 92.input__search:focus {
 93  background: #f0f0f0;
 94  transform: translateZ(20px) translateX(-5px) translateY(-5px);
 95  box-shadow: 5px 5px 0 0 #000;
 96}
 97 
 98.input__container::before {
 99  content: "USERNAME";
100  position: absolute;
101  top: -15px;
102  left: 20px;
103  background: #e9b50b;
104  color: #000;
105  font-weight: bold;
106  padding: 5px 10px;
107  font-size: 14px;
108  transform: translateZ(50px);
109  z-index: 4;
110  border: 2px solid #000;
111}