あなたのアイデアを、最後のピクセルまで。ライブプレビューとすぐに使えるコードで、美しいCSSボタンを作成しましょう。
ボタンを視覚的にデザインし、ウェブサイトで使用するためのHTMLとCSSを取得します。プリセットから始め、タイポグラフィ、色、形状、影を調整し、エクスポート前にインタラクション状態をプレビューします。
Everyday、Classic、Shaped、Expressive、Gradients、Eliteの各コレクションから44プリセットを閲覧できます。すべてのプリセットは編集可能な出発点となります。
スタイルコレクションを使用してギャラリーを絞り込みます。プリセットを適用すると、ボタンのテキストとクラス名は維持されたまま、デフォルトスタイルとホバースタイルが置き換わります。
シンプルな塗りつぶし、角丸、くっきりとしたアウトライン、あるいは装飾的なスタイルを試してみましょう。方向性が決まったら、他のタブを使用してページに合うよう細部を調整してください。
ボタンのテキスト、フォントファミリー、サイズ、太さ、間隔、行の高さ、配置、テキストの色を設定します。作業に合わせてラベルが更新される様子を確認できます。
テキストにはフォントコントロールと2つ目のボタンテキストフィールドが含まれています。フォントサイズは10から80pxの範囲で、リストされているファミリーは訪問者のデバイスで利用可能なフォントを使用します。
アクションを説明する短いラベルを使用してください。「塗りつぶし」の水平および垂直パディングは、フォントサイズを変更せずに周囲のスペースを追加します。ボタンを使用するページで、長いラベルの表示を確認してください。
単一の背景色を使用するか、2色を線形グラデーションでブレンドします。カラーピッカーと16進数入力により、視覚的または正確に作業できます。
「塗りつぶし」で、塗りつぶしスタイルを「線形グラデーション」に変更すると、「2番目の色」と「グラデーションの角度」が表示されます。角度は0から360度の範囲です。
16進数フィールドは、6桁のフルカラーまたは3桁の省略形を受け付けます。グラデーションの両端に対して白または色付きのラベルをテストしてください。スタジオはテキストのコントラストを自動的に認定しません。
連結または個別の角、境界線の幅とスタイル、ボックスシャドウ、テキストシャドウを調整します。コンテキストに合わせた形状をボタンに与えましょう。
「形状」で「すべての角をリンク」をオンにすると共通の半径が設定され、オフにすると各角を個別に設定できます。境界線のスタイルには、実線、破線、点線、二重線、inset、outset、ridge、groove、なしがあります。
「影」では、水平および垂直のオフセット、ぼかし、色、不透明度を設定します。ボックスシャドウにはスプレッドとinsetスイッチもあります。テキストシャドウは別個の設定のため、ボタンのアウトラインを変更せずにラベルに奥行きを追加できます。
デフォルトスタイルとホバースタイルを個別に編集します。デフォルト、ホバー、アクティブの外観をプレビューし、明るいキャンバスと暗いキャンバスでボタンを比較してください。
編集状態は、コントロールがどのスタイルを変更するかを選択します。キャンバス状態のボタンはプレビューのみを選択します。プレビューにホバーまたはクリックすると、そのインタラクションも表示されます。
デフォルトと一致するホバー値は、カスタマイズされるまでベースの編集内容に従います。エクスポートされるCSSには、必要に応じてホバールール、フォーカス表示のアウトライン、アクティブな動き、およびモーション低減ルールが含まれます。
生成されたCSSと一致するHTMLボタンをコピーするか、スタイルシートをダウンロードします。クラス名がこれら2つの要素を接続します。
特徴的なクラス名を選択し、タブからCSSをコピーしてから、HTMLからボタンをコピーします。ダウンロードすると、クラス名が付いた.cssファイルが保存されます。完全なウェブページはダウンロードされません。
プレビューとコード生成はブラウザ内で実行されます。スタジオはこのブラウザのローカルストレージに1つのドラフトを記憶しようとしますが、保持したいものはすべてエクスポートしてください。「リセット」でスタジオは開始時のスタイルに戻ります。
アップロードは不要です。JavaScriptがブラウザ内のライブエディタを動かします。HTMLとCSSを個別にコピーするか、CSSスタイルシートをダウンロードしてください。生成されたフォントスタックは、閲覧者のデバイスで利用可能なフォントを使用します。
