ボタンプラグイン
liquidButton
液体のようにモーフィングするホバーアニメーションボタン。
デモ
概要
ホバー時に液体のように形状が変化し、クリックで squeeze-bounce アニメーションが発生するボタンです。SVG で描画されるため、任意の色・サイズに対応します。
パラメーター
| パラメーター | デフォルト | 説明 |
|---|---|---|
text |
— | ボタンラベル（必須） |
href |
"#" |
遷移先 URL |
color |
"#5046e5" |
ボタン色 |
textColor |
"#ffffff" |
テキスト色 |
fontFamily |
"'Outfit', sans-serif" |
フォント |
float |
true |
浮遊アニメーション |
shadow |
true |
ドロップシャドウ |
radius |
"auto" |
角丸（"auto" で自動計算） |
使用例
{% from "block-button-liquid/block-button-liquid.njk" import liquidButton %}
{{ liquidButton("Get Started") }}
{{ liquidButton("次のページへ", "/about/", color="#0d9488") }}