「Hover Buttons」は、タグ内にクラス名を記述するだけで、様々なオンマウスのエフェクトを加えることができます。
公式サイトには全種類のサンプルが見れますが、個人的に気に入ったエフェクトをピックアップしていじってみました。
デモページを見る
◆ダウンロードと設置
下記URLの公式サイトの右上にある「Download」ボタンをクリックし、ファイル一式をダウンロードします。
https://varin6.github.io/Hover-Buttons/
「cssフォルダ」内にある「hoverbuttons.css」を下記のように読み込みます。
<link rel="stylesheet" href="css/hoverbuttons.css">
◆実装
下記のように、「aタグ」内に各エフェクトのクラス名を記述するだけです。
<a href="#" class="hbtn hb-fill-right-bg">Slide Right 2</a>
カラー変更は「hoverbuttons.css」を編集します。