Google Contact Form Animation?-CodePudding

How would I go about implementing the onclick animation seen on this Google login form?

As you click the button box, the placeholder text shrinks and moves to the top left and the button border forms around the text.

CodePudding user response：

That isn't a placeholder. Its just a label sitting absolute above an input field. There are 2 options.

First one is only html and css. But it only works if all input fields are required. So you cant send the formular if one is empty.

    <style>
    .wrapper {
      width: 100%;
      height: 50vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .wrapper .your-label {
      position: absolute;
    }

    #input:focus ~ .your-label,
    #input:valid ~ .your-label {
      background-color: yellow;
      color: blue;
      transform: translateY(-1rem);
      scale: 0.8;
    }
  </style>
  <body>
    <div >
      <input id="input" type="text" required />
      <label  for="input">Your Text</label>
    </div>
  </body>

Second one would be with js and you are able to send also forms that are empty.

    <style>
    .wrapper {
      width: 100%;
      height: 50vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .wrapper .your-label {
      position: absolute;
    }

    .your-label.active {
      background-color: yellow;
      color: blue;
      transform: translateY(-1rem);
      scale: 0.8;
    }
  </style>
  <body>
    <div >
      <input id="input" type="text" />
      <label  for="input">Yourt Text</label>
    </div>
  </body>
  <script>
    const form_input = document.querySelectorAll("#input");
    form_input.forEach((e) => {
      e.addEventListener("focus", () => {
        e.nextElementSibling.classList.add("active");
      });
      e.addEventListener("blur", () => {
        if (e.value === "") {
          e.nextElementSibling.classList.remove("active");
        } else {
          e.nextElementSibling.classList.add("active");
        }
      });
    });
  </script>