この例ではジェネレーターのコントロールのみを使用しています。上の画像は、エディターのスクリーンショットではなく、通常のHTMLボタンに適用された実際にダウンロードされたスタイルシートを示しています。
Signatureから始める
CSSボタンジェネレーターを開きます。「プリセット」で「Everyday」コレクションから「Signature」を選択します。ボタンテキストを「Get started」に設定します。コードエリアで、クラス名を「cta-button」に設定します。
プリセットはデフォルトおよびホバースタイルを置き換えますが、ラベルとクラス名は保持されます。詳細な調整を行う前に、開始点を選択してください。
クラス名はCSSルールをHTMLボタンに接続します。ジェネレーターはサポートされていない文字を削除します。関連のない要素のスタイリングを避けるため、短く特徴的な名前を使用してください。
グラデーションピルを作成する
編集状態を「デフォルト」に保ちます。「テキスト」で「System sans」を選択し、フォントサイズを18px、太さを「Bold」にします。白いテキスト色、標準スタイル、中央揃え、行の高さ1.4を維持します。
「塗りつぶし」で「線形グラデーション」を選択します。以下の2色と角度を使用してください。水平方向のパディングを32px、垂直方向のパディングを16pxに設定します。「形状」で「すべての角をリンク」を有効にしたまま、角の半径を100pxに設定します。枠線の幅は0pxのままにします。
「影」で「ボックスシャドウ」を有効にします。水平オフセット0px、垂直オフセット8px、ぼかし24px、広がり−4px、色#460BD8、不透明度32%を使用します。インセットシャドウとテキストシャドウはオフのままにします。
パディングはテキスト周囲のスペースを変更します。角の半径はアウトラインを変更します。大きな半径を設定すると、ラベルを広げることなく、このピル形状を作成できます。
ホバーに独自の処理を与える
編集状態を「ホバー」に切り替えます。「塗りつぶし」で背景色を#33099Eに、2番目の色を#6D20BFに変更します。グラデーション角度は135°のままにします。「影」で垂直オフセットを10px、ぼかしを28pxに変更します。その他の設定は変更しないでください。
キャンバスの「デフォルト」「ホバー」「アクティブ」ボタンを使用して、各状態を検査します。プレビューボタンの上にマウスを置いたり、押したりすることもできます。キャンバスをライトモードとダークモードで切り替えて、エッジと影を確認してください。
編集状態は、変更するスタイルを選択します。キャンバスの状態は、プレビューするもののみを変更します。外観を調整する前に、デフォルトの編集状態に戻してください。
デフォルトと一致するホバープロパティは、その後のデフォルト編集に従います。ホバープロパティをカスタマイズすると、独立した状態が維持されます。ベーススタイルを変更した後は、両方の状態を再確認してください。
エクスポートしてページでテスト
CSSタブを選択して「コピー CSS」を使用するか、「ダウンロード」を選択してcta-button.cssを保存します。HTMLタブを選択し、対応するボタンのマークアップをコピーします。HTMLには、同じクラス名とtype="button"のボタンが含まれています。
CSSをスタイルシートに追加するか、ダウンロードしたファイルをページからリンクします。ボタンを配置したい場所にHTMLを配置します。2つのエクスポートは連携して機能します。HTMLボタン単体ではスタイルが含まれていません。
ページを開き、デフォルト、ホバー、キーボードフォーカス、押下状態をテストします。エクスポートには、focus-visibleアウトライン、小さなアクティブ時の動き、およびreduced-motionルールが含まれています。周囲のスタイルやインストールされているフォントが結果に影響を与える場合があります。
生成されたボタンはスタイル設定されたコントロールです。プロジェクト内でクリック時の動作を接続し、フォームに追加する際は正しいボタンタイプを使用してください。
cta-button.css
ダウンロードされるファイル名はクラス名に従います。
よくある質問
CSSフレームワークは必要ですか？
いいえ。出力は標準のCSSとプレーンなHTMLボタンです。CSSを独自のスタイルシートに貼り付け、ボタンに一致するクラスを使用してください。
ダウンロードにはHTMLも保存されますか？
ダウンロードはクラス名にちなんだ名前の.cssファイルを保存します。ボタンのマークアップはHTMLタブから個別にコピーしてください。
各コーナーに異なる半径を指定できますか？
はい。「形状」で「すべてのコーナーをリンク」をオフにすると、左上、右上、右下、左下を個別に設定できます。この例では、ピル型にするためにリンクしたままにしています。
私のデザインは次回も残っていますか？
スタジオは現在のドラフトをこのブラウザのローカルストレージに保存しようとします。これはアカウントやデバイス間バックアップではありません。ブラウザの設定、サイトデータの消去、またはリセットによって削除または置き換えられる可能性があるため、保持したい作業はエクスポートしてください。
ボタンはサーバーにアップロードされますか？
スタイリングのプレビューとCSS/HTMLの生成はブラウザ内で実行されます。エディターは、エクスポートを作成するためにボタンのテキストやスタイリングのドラフトをアップロードすることはありません。
次のボタンに独自のスタイルを与えましょう。
開始点を選択し、詳細を調整して、コードをプロジェクトに取り込みます。