<!-- 

  Visually validate an input before submission
  - Make the submit button disabled until the required input is filled.
  - Highlight the form when the inner input has focus.

  ---

  Tachyons is optional. 

  You can merely use the following:
  <form id="form">
    <label for="email">Email Address</label>
    <input placeholder="Your email address" type="email" id="email" required>
    <button type="submit" id="submit">Subscribe</button>
  </form>

-->

<div class="ma4">
  <form id="form" class="bg-light-gray mw7 center pa4 mt5 br2-ns ba b--black-10">
    <div class="cf">
      <label class="clip" 
             for="email">
        Email Address
      </label>
      <input class="f6 f5-l input-reset bn fl black-80 bg-white pa3 lh-solid w-100 w-75-m w-80-l br2-ns br--left-ns" 
             placeholder="Your email address" 
             type="email" 
             id="email"
             required>
      <button class="f6 f5-l button-reset fl pv3 tc bn bg-green hover-bg-green white pointer w-100 w-25-m w-20-l br2-ns br--right-ns" 
             type="submit"
             id="submit">
        Subscribe
      </button>
    </div>
  </form>
</div>

#form:focus-within {
  box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
  transform: translateY(-2px);
}

#email:placeholder-shown + #submit:not(:focus) {
  opacity: .5;
  pointer-events: none;
}

/* 
  That's all!
  
  http://caniuse.com/#feat=css-placeholder-shown 
  http://caniuse.com/#feat=css-focus-within
*/