【Framer】ノーコードでフレーマーで作る！ボタンホバーのやり方

Framer（フレーマー）で、かつノーコードで作る手作りボタンホバー

CSSをご存知の方ならば、ボタンホバーだけでも、htmlからCssを書いて、完成してからまた修正を繰り返して、みたいな感じでボタンホバーを作っていたと思います。

ですが、フレーマーでのボタンホバーは”非常に簡単”です！

フレーマーでの浮き上がるボタンホバー作成手順

一応、ゴールはこんな感じでホバーできればと思います。

1.まず、Desktopに　Fボタンを押して、フレームを四角く作ります。

そして、大事な事は、Desktopにて、”Layout”をクリックすること。

何でかというと～、フレームを入れると、”Absolute”になってしまうからです。

基本的に、HPは上から積み下げていくものなので、”Relative”で積み下げていくのが重要です。

2. フレームの中にテキストを書く

この際に、フレームから外れてしまっても、”切り取り”、”貼付け”をすれば、フレーム内にテキストは入ります。

3.デザインをボタンっぽくしていく

フレーム部分にPaddingを付けて、かつ背景色を変えて、ボタンっぽくしていきます。

4.完成ボタンっぽく棒を付けるには

こちらは、”Insert”で、黄色い、スクラブる？を選択すれば、手書き風のフォントが使用できます。

5.コンポーネントを作る

そして、フレームを選択したまま、”Create Component”をクリックすると、別画面に移ります。

このコンポーネントで、ボタンとボタンホバーの状態を創っていきます！

コンポーネント化したら、Variantという名前に変更されます。

これはデフォルト、プライマリーというか装飾が優先されるので、これを修正すると、これから作る全てのヴァリアントが変更されます。

とりあえず、これは置いといて。

6.ホバーしたときに、キラッと光らせるにはどうする？

こちらは、ボタン外にフレームを2個追加させます。

ホバーしたら、このフレームがフレーム上を横切ればいいのですね！