CSSボタンジェネレーター

CSSボタングジェネレーターとは何ですか？

CSSボタンジェネレーターは、美しいCSSボタンのスタイルを素早く生成できる、包括的な無料オンラインツールです。コーディングは一切不要です。ビジュアルパネルでパラメータを調整してリアルタイムでプレビューを確認し、ワンクリックでそのまま使えるCSS/HTML/SCSSコードを生成できます。

主な機能

• テキスト／フォントの設定— ボタンのテキスト、フォント、サイズ、色、太さ、斜体、文字間隔、行高をカスタマイズできます
• 背景— 背景色と不透明度の調整が可能。線形・放射状・円錐状のグラデーションに対応
• サイズ／半径— 幅、高さ、および4辺のパディングを個別に設定可能。角の丸みを統一または個別に設定可能
• 影の効果— テキストシャドウ（X/Y/ぼかし/色） + ボックスシャドウ（X/Y/ぼかし/広がり/色/内側）
• 国境管理— 統一された枠線、または4辺それぞれを個別に設定可能な枠線（幅・スタイル・色）。border-imageによるグラデーション枠線にも対応しています。
• ホバー／アクティブ状態— ホバー時の背景色、拡大率、Y軸オフセット、グラデーション／シャドウのオーバーレイ；押下時のオフセット＋自動的な色の暗化
• アニメーションプリセット— 8つのCSSアニメーション：ネオングロー、スライドリビール、プログレスフィル、ボーダースネーク、パルススケール、リップルエフェクト、3D回転、フィルライズ
• 遷移アニメーション— 再生時間とタイミングの調整機能

プリセットの配色

10種類のワンクリックカラースキームが含まれています：「フラットブルー」、「3Dレイズドグリーン」、「グラデーションパープル」、「ネオングリーン」、「グラスモルフィズム」、「アウトラインダーク」、「ピルラウンド」、「マテリアルレッド」、「レトロオレンジ」、「ミニマルゴースト」。さまざまなスタイルをすばやく切り替えることができます。

コードの出力

• CSS— ボタンのスタイルコード一式（.btn-custom + :hover + :active）、ベンダープレフィックスは任意
• HTML— <button> タグと <a> タグの両方に関するサンプルコード
• SCSS— プロジェクト内で簡単に再利用できるよう、SCSSミキシン版を用意しました

インラインアイコンのサポート

LucideのインラインSVGアイコン10種類（ダウンロード、右矢印、検索、ハート、星、設定、ユーザー、メール、送信、アップロード）が含まれており、配置（左／右）とサイズを選択可能です。