こんにちは、アサミです。

ホームページ制作で、「ボタンのデザインがパッとしない…」「少し遊び心を加えたいけど、どうしたら？」と悩んだこと、ありませんか？

今日はそんなお悩みを解決するために、ノーコードツール『Studio』を使った「ボタンホバー」のアクションアイデア10選をご紹介します！

マンネリ化したデザインを一新し、ユーザーの心をつかむ動きをプラスしたい方にぴったりの内容です。

特に、「毎回同じようなアクションホバーばかりで、なんだかワンパターン…」と感じている方、新しいアイデアの宝庫になるかも！さらに、これらのアクションはCSSに頼らず実装可能です。CSSでページが重くなる心配なく、快適なユーザー体験を維持しながら、デザイン性をアップできます。

ぜひこの記事で、あなたのサイトにもっと魅力的な動きをプラスしてみましょう！！

早速、次のセクションでホバーアクションを具体的に見ていきましょう！

1.押してる感すごいボタン

実装手順

1.まずはボックスを用意し、その中にテキストを置きます。ボックスの角丸はお好みでつけて下さい。

2.ボックスに影をつけていきます。編集パネルの『シャドウ』を開き、

　【X:17】【Y:17】【ぼかし:25】とそれぞれ設定する。

3.【ホバー設定】ボックスのホバー設定画面から、

　先程つけた『シャドウ』を全て0にする。左上の斜線マークで一括解除できます！

4.【ホバー設定】ボックスのホバー設定画面で、移動【X:10】【Y:10】をつけて

　ホバー中は右と下に10pxずつ動くように設定する。これでホバー設定は終わりです！

5.あとは好みになりますが、ボタンを押す速度を調整していきます。個人的にはゆっくりな速度が好みです☺️なので、ボックスを選び、『モーション』タブから、【時間：800】に変更します。これで「押してる感がすごいボタン」完成です！！

2.影が移動するボタン

これは「1:押してる感すごいボタン」と途中まで同じ方法です。

影が移動することで、より動きの大きなボタンとなります。

実装手順

1.まずはボックスを用意し、その中にテキストを置きます。ボックスの角丸はお好みでつけて下さい。

2.ボックスに影をつけていきます。編集パネルの『シャドウ』を開き、

　【X:17】【Y:17】【ぼかし:25】とそれぞれ設定する。

　ここまでは「1:押してる感すごいボタン」を同じになります。

3.【ホバー設定】ボックスのホバー設定画面から、

　先程つけた『シャドウ』の値を変更します。【X:17】【Y:17】【ぼかしは25のまま】に　変更します！これで影の位置が逆になりました！

4.【ホバー設定】ボックスのホバー設定画面で、移動【X:10】【Y:10】をつけて

　ホバー中は右と下に10pxずつ動くように設定する。これでホバー設定は終わりです！

5.あとは好みになりますが、ボタンを押す速度を調整していきます。個人的にはゆっくりな速度が好みです☺️なので、ボックスを選び、『モーション』タブから、【時間：800】に変更します。これで「影が移動するボタン」完成です！！

3.IT系

実装手順

1.まずはボックスを用意し、その中にテキストを置きます。ボックスの角丸はお好みでつけて下さい。

2.次に青いボックスの中、テキストの右横にボックスを３つ追加します。

それぞれ名前をBox1、Box2、Box3とつけておきます。

それぞれのボックスの色や大きさなどは以下を値を設定してください！

　Box1：【色：白】【横幅：5px】【縦幅：5px】【角丸：50%】

　Box2：【色：黒】【横幅：27px】【縦幅：1px】【スケール：X:0 Y:1】【原点：左真ん中】

　Box3：【色：黒】【横幅：5px】【縦幅：5px】【角丸：50%】【不透明度：０】

下図2枚目のようになっていればOKです！

3.テキストの位置を調整していきます！

　青いボックスを選択→パディングでテキストが真ん中に来るよう調整。

　テキストを選択→右側の余白がほしいので【マージン：４px】設定。

4.【ホバー設定】青いボックスにホバー設定をしていきます！

　不透明度は元々１になっていると思いますが、【不透明度：１】に設定します。

　空設定にはなりますが、ここで設定しないとホバーがつかないので必須の設定です！

5.【インホバー設定】Box1、Box２、Box３にそれぞれインホバーを設定していきます。

　以下の値に設定してください。

　Box1：【不透明度：０】

　Box2：【スケール：X:1 Y:1】

　Box3：【不透明度：１】

　【操作方法】

Boxを選択→条件付きスタイル→インホバー→上記それぞれの値を設定

※そもそも【インホバー】が出てこないよ！という方はホバー設定ができていない可能性が高いです！ホバー設定ができているか見直してみて下さい。

6.あとは好みになりますが、ホバーの速度を調整していきます。個人的にはゆっくりな速度が好みです☺️なので、それぞれのボックスを選び、『モーション』タブから、【時間：800】に変更します。これで「IT系」完成です！！

4.移り変わるグラデーション