galaxy/Inputs/Yaya12085_new-rabbit-37.html

<div class="wrapper">
  <span class="search">
    <svg
      fill="none"
      color="#000000"
      height="24"
      width="24"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="1.5"
        stroke="currentColor"
        d="M17.5 17.5L22 22"
      ></path>
      <path
        stroke-linejoin="round"
        stroke-width="1.5"
        stroke="currentColor"
        d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z"
      ></path></svg
  ></span>

  <input type="text" name="text" class="input" placeholder="Search..." />
  <div class="coloredborder"></div>

  <button class="filter">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="24"
      height="24"
      color="#000000"
      fill="none"
    >
      <path
        d="M8.85746 12.5061C6.36901 10.6456 4.59564 8.59915 3.62734 7.44867C3.3276 7.09253 3.22938 6.8319 3.17033 6.3728C2.96811 4.8008 2.86701 4.0148 3.32795 3.5074C3.7889 3 4.60404 3 6.23433 3H17.7657C19.396 3 20.2111 3 20.672 3.5074C21.133 4.0148 21.0319 4.8008 20.8297 6.37281C20.7706 6.83191 20.6724 7.09254 20.3726 7.44867C19.403 8.60062 17.6261 10.6507 15.1326 12.5135C14.907 12.6821 14.7583 12.9567 14.7307 13.2614C14.4837 15.992 14.2559 17.4876 14.1141 18.2442C13.8853 19.4657 12.1532 20.2006 11.226 20.8563C10.6741 21.2466 10.0043 20.782 9.93278 20.1778C9.79643 19.0261 9.53961 16.6864 9.25927 13.2614C9.23409 12.9539 9.08486 12.6761 8.85746 12.5061Z"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </svg>
  </button>
</div>

<style>
/* From Uiverse.io by Yaya12085  - Tags: animation, gradient, button, input, focus, challenge, input effect , input */
.wrapper {
  --color1: #cc279a;
  --color2: #4d38de;
  --color3: #010101;
  --white: #fff;
  --radius: 10px;
  --size: 280px;
  --icon: 35px;
  --border-color: rgba(255, 255, 255, 0.3);
  --line: rgba(114, 114, 114, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius);
  background-color: var(--color3);
  max-width: var(--size);
  width: 100%;
  padding: 2px 8px;
  position: relative;
  border: 1px solid var(--border-color);
  transition: 0.2s 0s linear;
}
.wrapper:focus-within {
  box-shadow: -100px 0px 80px -20px var(--color1),
    100px 0 80px -20px var(--color2), 0px 0px 80px -0px var(--color3);
}
.wrapper::after {
  position: absolute;
  content: "";
  inset: -50px;
  border-radius: var(--radius);
  z-index: -2;
  background-color: var(--color3);
  background-image: linear-gradient(
      0deg,
      transparent 24%,
      var(--line) 25%,
      var(--line) 26%,
      transparent 27%,
      transparent 74%,
      var(--line) 75%,
      var(--line) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      var(--line) 25%,
      var(--line) 26%,
      transparent 27%,
      transparent 74%,
      var(--line) 75%,
      var(--line) 76%,
      transparent 77%,
      transparent
    );
  background-size: 30px 30px;
  border: 10px solid rgba(0, 0, 0, 0.6);
}
.input {
  flex: 1;
  height: 100%;
  padding: 16px 6px 16px calc(var(--icon) + 6px);
  outline: none;
  border: none;
  background-color: transparent;
  color: var(--white);
  font-weight: 400;
}

.input::placeholder {
  color: var(--white);
  font-weight: 400;
}

.search,
.filter {
  width: var(--icon);
  height: var(--icon);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}

.search svg,
.filter svg {
  color: var(--white);
}
.search {
  position: absolute;
  pointer-events: none;
}
.filter {
  border: none;
  background-color: transparent;
  outline: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.coloredborder {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--radius);
  overflow: hidden;
  background-repeat: no-repeat;
}
.coloredborder::after {
  position: absolute;
  content: "";
  inset: -10px;
  overflow: hidden;
  border-radius: inherit;
  background-size: 100%;
  background-image: transparent;
  z-index: -1;
  filter: blur(10px);
}

.input:focus + .coloredborder::after {
  background-color: var(--color3);
  background-repeat: no-repeat;
  background-image: linear-gradient(60deg, var(--color2), var(--color1));
  animation: border-animate 3s linear infinite alternate;
}

@keyframes border-animate {
  0% {
    background-position: calc(var(--size) * -1) calc(var(--size) / 6 * -1);
  }

  100% {
    background-position: var(--size) calc(var(--size) / 6);
  }
}

</style>