3種の GSAP インタラクティブボタンの動作確認ページです。
ボタンにホバーして各種アニメーションを確認してください。
ホバーすると液体のように形が変形するボタン。
スクイッシュ → バウンス → 安定ホバーの3段階アニメーション。
color / textColor / fontFamily / float / shadow / radius でカスタマイズできます。
| パラメーター | 型 | デフォルト | 説明 |
|---|---|---|---|
| text | string | — | ボタンラベル（必須） |
| color | string | '#5046e5' | ボタン色 hex |
| textColor | string | '#ffffff' | テキスト色 hex |
| fontFamily | string | "'Outfit', sans-serif" | フォントファミリー |
| float | boolean | true | 浮遊アニメーション |
| shadow | boolean | true | ドロップシャドウ |
| radius | number|'auto' | 'auto' | 角丸 px（'auto' で高さから自動計算） |
ホバーすると文字が1文字ずつ順番にバウンスするタイポグラフィ主役のボタン。
ホバー時に光が走るシマー効果も付きます。
staggerDir で跳ね方向を、bounceY で跳ね上がり量を変えられます。
| パラメーター | 型 | デフォルト | 説明 |
|---|---|---|---|
| text | string | — | ボタンラベル（必須） |
| color | string | '#111111' | ボタン背景色 |
| textColor | string | '#ffffff' | テキスト色 hex |
| fontFamily | string | "'Syne', sans-serif" | フォントファミリー |
| staggerDir | string | 'start' | 'start' | 'center' | 'end' | 'random' |
| bounceY | number | -4 | 跳ね上がり量 px（負の値で上方向） |
| float | boolean | false | 浮遊アニメーション |
| shadow | boolean | false | ドロップシャドウ |
| radius | number|'auto' | 'auto' | 角丸 px（'auto' で高さから自動計算） |
ホバーするとSVGのstrokeが上辺中央から両方向に描画されるミニマルなボタン。
テキストも微妙に浮き上がります。マウスアウトで逆方向に消えます。
color と textColor を同色にするとカラーリングが統一されます。
| パラメーター | 型 | デフォルト | 説明 |
|---|---|---|---|
| text | string | — | ボタンラベル（必須） |
| color | string | '#111111' | ホバー時ストローク色 hex |
| textColor | string | '#111111' | テキスト色 hex |
| fontFamily | string | "'DM Sans', sans-serif" | フォントファミリー |
| float | boolean | false | 浮遊アニメーション |
| shadow | boolean | false | ドロップシャドウ |
| radius | number | 3 | 角丸 px |
| strokeWidth | number | 1.2 | 線の太さ px |
| duration | number | 0.55 | ストローク描画時間（秒） |
ページの front-matter に useGsap: true を設定し、
使用するフォントを事前に読み込んでから、マクロを呼び出してください。
---
layout: layouts/base.njk
title: My Page
useGsap: true
---
<!-- フォントの読み込み（使用するフォントのみ） -->
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@500;700&display=swap" rel="stylesheet">
{% from "block-button-liquid/block-button-liquid.njk" import liquidButton %}
{% from "block-button-stagger/block-button-stagger.njk" import staggerButton %}
{% from "block-button-stroke/block-button-stroke.njk" import strokeButton %}
{{ liquidButton("Get Started", color="#5046e5") }}
{{ staggerButton("Learn More", color="#0d9488", staggerDir="center") }}
{{ strokeButton("Contact", color="#6366f1", textColor="#6366f1", radius=24) }}