ホバーで色が変化するボタンの作成方法

条件付きスタイルの「ホバー」「（in）ホバー」を使用して、カーソルを乗せた時に色などのスタイルを変更することができます。

このようなスタイルの変化を「購入」、「登録」、「送信」などの重要なアクションボタンに適用することで、閲覧者の注意を引き付け、アクション促進へつながります。

ボックスを配置します。その中にテキストボックスを追加してボタンを作ります。

テキストボックスを選択したまま、新たなボックスを追加します。

追加したボックスの位置は絶対位置に変更し、縦横の幅を100%に設定します。そして、ボックスの色を黒に設定します。

テキストボックスからはみ出ている部分を非表示にするために、親ボックスのはみ出し設定を「切り取り」に変更します。

ボックスのモーション設定を行います。中のボックスを選択し、モーションタブを開きます。ここで、スケールのXを0に設定します。

左からボタンの色が変わる表現をするため、原点を左の中央に設定します。

親ボックスを選択し、エディターの右上にある「条件付きスタイル」からホバーをクリックします。透明度を1に設定します。

※親ボックスのスタイルは変更しませんが、中の要素にinホバーを設定するため、透明度を1に設定しています

子ボックスを選択し、「条件付きスタイル」のinホバーをクリックし、スケールのXを1に変更します。

テキストボックスを選択して、重ね順を2に設定ます。最後に、条件付きスタイルのinホバーをクリックして、テキストの色を白にします。

エディタの右上にある「プレビュー」ボタンをクリックして、ライブプレビューを見ながら、設定を微調整などして完成です。