Change button color if input is valid

Question

I want to change the color of the button, if the input is valid (the required fields are filled). How can I achieve that without javascript, just with CSS and HTML?

.wrapper {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  background: linear-gradient(to bottom, #F4F6F9, #D3D8E8);
  font-family: Arial;
}

<div class="wrapper">
  <main class="main">
    <h2>Login</h2>
    <form method="POST" action="main.html">
      <label for="username"><b>Username:</b></label>
      <input id="username" type="text" placeholder="Username" required/><br/>
      <label for="password"><b>Password:</b></label>
      <input id="password" type="password" placeholder="Password" required/><br/>
      <input class="button" type="submit" value="Login" /><br/>
    </form>
  </main>
</div>

Answer 1

You could look into using the valid syntax

.wrapper {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    background: linear-gradient(to bottom, #F4F6F9, #D3D8E8);
    font-family: Arial;
}

#myForm:valid .button {
  background : green;
}

<div class="wrapper">
    <main class="main">
        <h2>Login</h2>
        <form id="myForm" method="POST" action="main.html">
            <label for="username"><b>Username:</b></label>
            <input id="username" type="text" placeholder="Username" required/><br/>
            <label for="password"><b>Password:</b></label>
            <input id="password" type="password" placeholder="Password" required/><br/>
            <input class="button" type="submit" value="Login"/><br/>
        </form>
    </main>
</div>