title: Create another button when certain input is empty
body: <p>I am trying to make a login form for a username and a password, but I want it to work like this: when the user clicks the login button while at least one the input fields in empty the login button has to shrink(to the left) to 50% of its original width and another button has to appear to the right of it(equal in size to the other button). The second button says Register.</p>
  
  <pre><code>&lt;div class="login"&gt;
          &lt;input type="text" placeholder="username" name="user"&gt;&lt;br&gt;
          &lt;input type="password" placeholder="password" name="password"&gt;&lt;br&gt;
          &lt;input type="button" value="Login"&gt;
         (&lt;input type="button" value="Register"&gt; this is what has to appear)
  &lt;/div&gt;
  </code></pre>