ボタンプラグイン
strokeButton
ホバーでSVGストロークが描画されるミニマルボタン。
デモ
概要
ミニマルなアウトラインボタン。ホバー時にSVGストロークが描画されるアニメーションが発生します。
パラメーター
| パラメーター | デフォルト | 説明 |
|---|---|---|
text |
— | ボタンラベル（必須） |
href |
"#" |
遷移先 URL |
color |
"#111111" |
ホバー時ストローク色 |
textColor |
"#111111" |
テキスト色 |
fontFamily |
"'DM Sans', sans-serif" |
フォント |
float |
false |
浮遊アニメーション |
shadow |
false |
ドロップシャドウ |
radius |
3 |
角丸 px |
strokeWidth |
1.2 |
線の太さ px |
duration |
0.55 |
ストローク描画時間（秒） |
使用例
{% from "block-button-stroke/block-button-stroke.njk" import strokeButton %}
{{ strokeButton("Learn More") }}
{{ strokeButton("詳しく見る", "/about/", color="#6366f1", textColor="#6366f1") }}