svgを使って、アニメーション効果付き入力判定をおこなうパスワードボタンです。サンプルは、ボタンをフォーカス（プレースフォルダの"Password"部分）して、パスワードを入力し、右向き矢印をクリックします。パスワードが正しいとグリーンの背景色に「Yes!」と表示され、そうでない場合は赤い背景色に「Oops!」と表示されます。
正しいパスワードは「pass」です。

サンプルのhtmlソース

<div class="container">
  <form data-state="typing">
    <input type="password" placeholder="Password">
    <button type="submit">
      <div class="submit-bg"></div>
      <svg class="icon-arrow" viewBox="0 0 31.49 31.49">
        <path d="M21.205 5.007c-.429-.444-1.143-.444-1.587 0-.429.429-.429 1.143 0 1.571l8.047 8.047H1.111C.492 14.626 0 15.118 0 15.737c0 .619.492 1.127 1.111 1.127h26.554l-8.047 8.032c-.429.444-.429 1.159 0 1.587.444.444 1.159.444 1.587 0l9.952-9.952c.444-.429.444-1.143 0-1.571l-9.952-9.953z"/>
      </svg>
      <svg class="icon-error" viewBox="0 0 100 100">
       <path d="M10 10 L90 90 M10 90 L90 10"/>
      </svg>
      <svg class="icon-success" viewBox="0 0 100 100">
        <path d="M0 60 L40 100 L100 0"/>
      </svg>
    </button>
    <span class="message message--error">Oops!</span>
    <span class="message message--success">Yes!</span>
  </form>
</div>