ボタンプラグイン

waveButton

クリックで画面全体を波形SVGが覆うトランジションボタン。

← ボタンプラグイン一覧


デモ


概要

クリックすると波形 SVG が画面を覆い、href へ遷移します。href が "#" の場合は遷移せずアニメーションのみ再生します。


パラメーター

パラメーター デフォルト 説明
text ボタンラベル(必須)
href "#" 遷移先 URL
color "var(--color-primary)" ウェーブの色
textColor "var(--color-primary)" ボタンテキスト・枠線の色

使用例

{% from "block-button-wave/block-button-wave.njk" import waveButton %}
{{ waveButton("次のページへ", "/about/") }}
{{ waveButton("デモ再生", "#", color="var(--color-primary)") }}

← ボタンプラグイン一覧 | ↑ 目次