---
title: chatty-snake-44
made_by: guilhermeyohan
---

```css
.input-form {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
}

.input {
  border: solid 1.9px #9e9e9e;
  border-radius: 1.3rem;
  background: none;
  padding: 1rem;
  font-size: 1rem;
  color: #000000;
  transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.textUser {
  position: absolute;
  left: 15px;
  color: #666666;
  pointer-events: none;
  transform: translateY(1rem);
  transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.input:focus,
input:valid {
  outline: none;
  box-shadow: 1px 2px 5px rgba(133, 133, 133, 0.523);
  background-image: linear-gradient(
    to top,
    rgba(182, 182, 182, 0.199),
    rgba(252, 252, 252, 0)
  );
  transition: background 4s ease-in-out;
}

.input:focus ~ label,
input:valid ~ label {
  transform: translateY(-95%) scale(0.9);
  padding: 0 0.2em;
  color: #000000be;
  left: 80px;
}

.input:hover {
  border: solid 1.9px #000002;
  transform: scale(1.03);
  box-shadow: 1px 1px 5px rgba(133, 133, 133, 0.523);
  transition: border-color 1s ease-in-out;
}
```

```html
<div class="input-form">
  <input class="input" name="text" type="text" required="" />
  <label class="textUser">Click Here</label>
</div>
```
