リキッドメタルボタンは、WebGLシェーダーで液体金属（クローム）の質感を持つボタンを作れる無料ツールです。テンプレートを選び、うねり(rep)・光の角度(angle)・速さ(speed)・色・リム・形を調整して、外部ライブラリ不要のHTML/CSS/JS（MIT）を生成できます。
使い方（3ステップ）
- テンプレートを選ぶ：FLAT・A〜H から、作りたい質感に近いものをクリック
- 調整する：rep・angle・speed・rim・hue・tint と、形（長方形/丸）・テーマ（ダーク/ライト）をスライダー/ボタンで調整
- コードをコピー：「一式（HTML/CSS/JS）」または「JS + CSS」タブのコードをコピーして貼り付け
設定項目 早見表
| 項目 | 役割 |
|---|---|
| rep | うねりの強さ。0でうねり無しのなめらかな鏡面メタルになる |
| angle | 光（うねり）の角度（0〜360°） |
| speed | アニメーションの速さ。0で静止 |
| rim | 金属が見える縁（リム）の太さ（px） |
| hue | 模様の色相（0〜360°） |
| tint | 色の濃さ。0で白（無色メタル）、上げるとhueの色がのる |
| 形 | 長方形 / 丸（円） |
| テーマ | ダーク（暗い面＋淡色文字）/ ライト（明るい面＋濃色文字）。プレビュー背景も切替 |
生成コードの2タブ
- 一式（HTML/CSS/JS）：WebGLの描画エンジンまで含む自己完結スニペット。コピペだけで動く
- JS + CSS：
createLiquidMetalヘルパーを読み込み済みの人向けの軽量版（このボタンのCSS＋呼び出しのみ）
よくある質問
どんなボタンが作れますか？
WebGLシェーダーで描く、液体金属（クローム）の質感を持つボタンを作れます。うねり・色・リム・形・テーマを変えて、シルバーからゴールド・カラーメタルまで表現できます。
出力したコードはそのまま使えますか？
はい。「一式（HTML/CSS/JS）」タブはWebGLの描画エンジンまで含む自己完結コードで、コピペで動きます。「JS + CSS」タブは createLiquidMetal ヘルパーを読み込み済みの人向けの軽量版です。外部ライブラリ依存はありません（MIT）。
うねりの無い、なめらかな金属にできますか？
はい。テンプレートの FLAT を選ぶか、rep を 0 にすると、うねりの無いなめらかな鏡面メタルになります。
リムの色を白にできますか？
はい。tint を 0 にすると無色＝白のメタルになります。hue と tint を上げると金・銅・青・緑など好きな色のメタルにできます。
アニメーションも出力されますか？
はい。speed で動きの速さを調整できます。speed を 0 にすると静止した金属になります。
どのブラウザで表示されますか？
WebGL に対応する Chrome・Edge・Safari・Firefox などの主要ブラウザで表示されます。
商用利用できますか？
はい。生成されるコードは MIT ライセンスで、商用サイトでも自由に利用できます。