AIで検索
キーワードを入力するだけで、AIが関連するレッスン、ドキュメント、情報を自動でピックアップします。
キーワードを入力するだけで、AIが関連するレッスン、ドキュメント、情報を自動でピックアップします。
ボタンはCall to action (CTA) の役割を果たし、ページ、フォーム、アセットなどにリンクします。
サイトにボタンを追加するには
デフォルトのボタンテキストは2つの方法で編集できます:
ボタンのフォントとスタイルは、自動的にBody (All Pages)タグから継承されます。style panel > Selector field > Inheritance dropdownで、Body (All Pages)タグに入り、タイポグラフィのデフォルトを設定したり上書きしたりすることができます。 Body (All pages)タグの詳細については、こちらをご覧ください。
ボタンの色を変更することもできます。ボタンの背景色を変更するには
新しい要素に変更を加えると、自動的にクラスが作成されます。クラスによって、スタイルを制御し、上書きすることができます。スタイルを再利用するには、クラスラベルをクリックし、style panelのselector fieldで名前を変更します。
ボタンのサイズは、内部のテキスト(テキストの長さ、フォントサイズ、行の高さ)とパディング(ボタン内部のスペース)によって決まります。
デフォルトのパディング値を上書きする:
ボタンのサイズは、style panel > sizeで幅と高さを変更することで調整できます。
ボタンは、URL、内部または外部ページ、ページセクション、ファイルダウンロードにリンクしたり、メールや電話をトリガーしたりすることができます。これらのオプションにアクセスするには、キャンバス上でボタンを選択し、「element settings」>「link setting」を選択するか、キャンバス上のボタン要素の「歯車」アイコンをクリックします。
ボタンの状態は、style panel > selector fieldで確認できます。 デフォルトでは、ボタンにHoverステートのスタイルはありません。スタイル設定できるボタンのステートは6つあります:
これらのステートに基づいてボタンをスタイルすることができます。例えば、サイト訪問者がボタンの上にカーソルを置いたときに、ドロップシャドウが表示されるようにボタンをデザインすることができます。
ボタンのHoverステートを変更する:
他のボタンのプロパティを弄るには、セレクタフィールドドロップダウンで、ホバー状態からなしに戻してください。それから、Bordersセクションで半径を変更することで、ボタンの角を丸くすることができます。
ボタンにボックスシャドウを追加するには、style panel > effects > box shadowと進みます。ここでは、ボックスシャドウの設定を行うことができます(例えば、20pxに設定してぼかしを柔らかくし、角度を180度に設定します)。これはホバー状態ではないので、距離と色の不透明度を0に設定できます。後でボックスシャドウを追加してこれらの値を相殺し、ホバー効果をよりドラマチックにすることができます。
ホバーステートに戻ってクリックすると、先ほど作成したシャドウを修正できます(ホバー時に変化するようにシャドウを微調整できます)。不透明度を上げたり(例えば、不透明度20%)、距離を変えたり(例えば、3px)できます。
その後、noneのステートに戻り、ボタンがホバー時にどのように動作するかをテストします。
アニメーションのトランジションにより、noneとhoverステートの切り替えがよりスムーズになります。
トランジションを追加する:
デフォルトの継続時間は200に設定されているので、200ミリ秒かけて遷移することになる。これで、ボタンにカーソルを合わせてテストすることができます。
影をアニメーション化するには、Box shadowプロパティにトランジションを適用し、イージングカーブを変更します。デフォルトは "ease "ですが、より劇的な開始と緩やかな終了を試すことができます("ease out circular "が良い選択です)。開始がとても劇的なので、タイミングを1000ミリ秒に拡大するとよいでしょう。
ボタンにカーソルを合わせると、プレビューができます。
エスケープキー(MacとWindowsの場合)を押せばいつでも要素の選択を解除できますが、要素の境界線(マウスカーソルを合わせてテストするときに表示される青い輪郭)が邪魔になるかもしれません。ブレークポイントのアイコンの横にある、キャンバスの設定をクリックし、要素のエッジを表示するのチェックを外します。
ホバー時にボタンを移動させる:
トランスフォームのトランジションを追加することもできます。トランスフォームのトランジションを追加するには
デザイナーの左上にある "目 "のアイコンをクリックして、プレビューモードでチェックしてください。
ボタンをコピー&ペーストすると、元のボタンの隣に新しいボタンを配置することができます。同じクラスを持つボタンに加えたスタイルの変更は、そのクラスを持つすべてのボタンに影響します(マージンやパディングの変更など)
ヒーローセクションのボタンに特別なクラスを追加する代わり、divブロックを追加して名前を付け(例:"Button wrapper")、各ボタンをその中にドラッグします。これにより、1つのボタンクラスを管理し、完璧な整列のためにネガティブマージンを設定することができます。
これは全てのボタンに有効です。(ネガティブマージンを持つ)ボタンラッパーを使用することで、他のボタンに設定した対照的なマージンを相殺することができます。ボタンの配置が異なるからといって、異なるグループのボタンを管理する必要はありません。
Link blockはdiv blockと同じで、中に要素を入れることができるボックスです。add panel > basicsからlink blockをキャンバスにドラッグし、名前を付けてクラスを適用します。
次に、add panel>typographyと進み、Link block内のキャンバスにtext blockをドラッグします。ダブルクリックしてテキストを編集することができます。下線を消すには、style panel>typography>styleと進み、decorationの「X」をクリックします。style panel>typographyでリンクの色を変更することもできます。
Link block内にアイコン(矢印など)を追加できます。アイコンのサイズを変更するためにコーナーをクリックしてドラッグする代わりに、スタイルパネルを使って値を入力すると、自動的に作成されるクラスによって、サイト全体でこのリンクブロックを再利用するたびに矢印のサイズを変更できます。
アイコンをボタン内に配置するには、style panel > layoutで設定を変更し(例:display:flex、align:center)、spacongで余白を調整します。
また、メインのボタン・クラスにflexを追加したため、上部の2つのボタンが "Button wrapper "divブロックの幅いっぱいに表示されてしまいます。これを修正するには、ナビゲーターで "Button wrapper "を選択し、style panel > layoutと進み、表示をflexに設定します。
これはほんの始まりにすぎません。特にインタラクションやアニメーションでは、もっとたくさんのことができます。