ボタンプラグイン
staggerButton
ホバーで文字が1文字ずつ跳ねるタイポグラフィボタン。
デモ
概要
ホバー時に文字が stagger アニメーションで1文字ずつ弾むボタンです。
パラメーター
| パラメーター | デフォルト | 説明 |
|---|---|---|
text |
— | ボタンラベル（必須） |
href |
"#" |
遷移先 URL |
color |
"#111111" |
ボタン背景色 |
textColor |
"#ffffff" |
テキスト色 |
fontFamily |
"'Syne', sans-serif" |
フォント |
staggerDir |
"start" |
方向: "start" / "center" / "end" / "random" |
bounceY |
-4 |
跳ね上がり量 px |
float |
false |
浮遊アニメーション |
shadow |
false |
ドロップシャドウ |
radius |
"auto" |
角丸（"auto" で自動計算） |
使用例
{% from "block-button-stagger/block-button-stagger.njk" import staggerButton %}
{{ staggerButton("Get Started") }}
{{ staggerButton("次のページへ", "/about/", staggerDir="center") }}