CSS Gold Button Generator

このツールとは？

このツールは、磨かれた金属の表面に光が反射しているように見えるよう調整された、各メタルスタイル専用の3色ストップのリニアグラデーションを適用します。

スタイルセレクターでゴールド、シルバー、ブロンズ、ローズゴールドを切り替えられ、それぞれにその金属に合わせて調整されたグラデーション、テキストカラー、シャドウが用意されています。

ボタンのテキストを入力したり、スタイルを切り替えたり、角の丸みを調整したりするたびに、ライブプレビューが即座に更新されるので、CSSをコピーする前に仕上がりを正確に確認できます。

なぜこれを使うのか？

• オンラインサロンやセミナーのLP（ランディングページ）で、ゴールドの「今すぐ申し込む」ボタンを作りたいが、画像を書き出さずにCSSだけで軽量に実装したいとき。
• ECサイトの会員ランク制度で、シルバー会員・ゴールド会員・プラチナ会員のバッジを、それぞれのランクに合った金属色で統一感を持たせて表示したいとき。
• 結婚式の招待状サイトやブライダル系のサービスで、ローズゴールドの上品な「出席する」ボタンを作りたいけれど、単純な単色背景ではチープに見えてしまうとき。
• クライアントから『高級感のあるボタンにしてほしい』とだけ指示され、単色のグラデーションでは思ったような光沢感が出ずに試行錯誤しているとき。
• 4種類のメタルスタイルとborder-radiusをその場で切り替えながらプレビューを見比べ、サイト全体のトーンに一番馴染む質感を選びたいとき。
• 公開前のランディングページのデザインを外部ツールに送りたくない — このジェネレーターはすべてブラウザ内で完結し、CSSがサーバーを経由しません。

使い方

1. ボタンのテキストを入力します。
2. メタルスタイル — ゴールド、シルバー、ブロンズ、ローズゴールド — を選びます。
3. デザインの角の丸みに合わせてborder radiusのスライダーを調整します。
4. 「Copy」をクリックして生成されたCSSコードをコピーし、スタイルシートに貼り付けます。

例

入力

Text: "Buy Now", Style: Gold, Radius: 8

出力

background: linear-gradient(180deg, #f9e28c 0%, #d4a017 50%, #f9e28c 100%);
color: #5c3d00;
border: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(212,160,23,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
padding: 12px 32px;
font-weight: 600;
cursor: pointer;

生成されるCSSは、3色ストップのメタリックグラデーション、それに合わせたテキストカラーとシャドウ、標準的なボタンのパディングを組み合わせた、すぐに使えるスタイルブロックです。

メタルスタイル一覧

各メタルスタイルには、専用に調整されたグラデーション、テキストカラー、シャドウカラーが使われています。

関連ツール

他のCSSジェネレーターもぜひお試しください。

→ Neon Text Generator · CSS Emboss Text Generator · Border Radius Generator

日本のサイトでの活用シーン

日本のオンライン講座やコンサルティング系のLPでは、『申し込みはこちら』のような主要なCTAボタンにゴールドを使うことで、限定感や特別感を演出する手法がよく見られます。特に高単価の商品・サービスを扱うページでは、単色の派手な赤や青のボタンよりも、落ち着いたゴールドやローズゴールドのメタリックボタンのほうが『信頼できる高級サービス』という印象を与えやすい傾向があります。

また、ECサイトの会員ランク表示（シルバー会員・ゴールド会員・プラチナ会員など）にもこのツールは相性が良く使われています。ランクごとに異なる金属色のバッジやボタンを用意することで、ユーザーが自分の現在のステータスを視覚的に一目で把握でき、次のランクを目指すモチベーションにもつながります。日本のポイントプログラムや航空会社のマイレージ制度でもおなじみの表現方法です。

よくある質問