Lettering.jsを使って、文字を並べ直すようなhoverエフェクトボタンです。ボタンにhoverすると、左側から黒文字から白文字へ、または白文字から黒文字へ一文字ずつ変化し、それに合わせて少し浮き上がるエフェクトです。hoverを外すと右側から逆に変化して元に戻ります。
オリジナルは、英文のみでしたが、日本語でも問題なく動きます。また、オリジナルは、全体がレスポンシブル対応になっていましたが、サンプルページに表示する都合で、CSSを書き換えてレスポンシブル対応を外しています。
使い方：html内で、変化する時間を「data-duration」の値で、ふらつきを「data-stagger」の値でそれぞれ調整できます。最初の薄いブルーのボタン（class="btn--one"）は、値が無指定のデフォルトです。
htmlのソース
<main>
<button class="btn btn--action btn--one">送信・submit</button>
<button class="btn btn--action btn--two" data-duration="0.4" data-stagger="0.018">百万石 WEB受註システム</button>
<button class="btn btn--action btn--three" data-duration="0.6" data-stagger="0.014">0万石 WEB受註システム</button>
<button class="btn btn--action btn--four" data-duration="0.8" data-stagger="0.04">営業日calendar</button>
<button class="btn btn--action btn--five" data-duration="0.3" data-stagger="-0.014">システム受託開発</button>
</main>
