galaxy/Inputs/devkatyall_smart-lionfish-91.html

<div class="input">
  <input
    class="to-do-input"
    placeholder="Your Tasks Go Here..."
    name="text"
    type="text"
  />
  <div class="todo-line">&nbsp;</div>
</div>
<button class="input button">Add</button>

<style>
/* From Uiverse.io by devkatyall  - Tags: input, submit, close */
.input {
  display: block;
}
.to-do-input {
  color: rgb(133, 198, 255);
  display: block;
  max-width: 190px;
  height: 2.7em;
  padding: 1em 1em;
  font-family: "Instrument Sans", sans-serif;
  border: none;
  border-radius: 4px;
  background-color: black;
}
.to-do-input:focus {
  outline: none;
}
.todo-line {
  z-index: 2;
  position: absolute;
  margin-top: -2px;
  width: 216px;
  height: 2px;
  border-radius: 4px;
  background-color: black;
}
.to-do-input:focus ~ .todo-line {
  animation: draw 0.3s ease-in;
  background: rgb(49, 228, 255);
}
@keyframes draw {
  0% {
    opacity: 0;
    width: 0px;
    filter: hue-rotate(0deg);
  }
  100% {
    opacity: 1;
    width: 200px;
    filter: hue-rotate(360deg);
  }
}
.input.button {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  display: flex;
  height: 2.7em;
  padding: 1em 1em;
  align-items: center;
  background-color: black;
  border: none;
  color: white;
  transform: translateX(-4px);
  cursor: pointer;
  transition: 0.5s all;
}
.input.button:active {
  background-color: rgb(49, 228, 255);
  transition: 0.5s all;
}

</style>