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">百万石&nbsp;WEB受註システム</button>
  <button class="btn btn--action btn--three" data-duration="0.6" data-stagger="0.014">0万石&nbsp;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>

 

 

引用と参考;https://codepen.io/hexagoncircle/pen/vJNMrB
戻るボタン