【10種類】Bubbleエディターだけで出来る、ボタンhoverアクション

先日Twitterで、Bubbleのボタンについての投稿をしました！

Hi Bubblers. Don't give up making fancy buttons without code. I only use Conditional & Transitions.

Bubblerのみなさん。css無しで楽しいボタンを作ってみました😊 Conditional & Transitionsだけ。設定知りたい方教えます〜☘️深夜に楽しくなってもうた！https://t.co/jwx1xxOLw4 #Bubble pic.twitter.com/AGvI2ai58B
— Akiko Obatrip | Bubbleエンジニア (@obatrip) July 13, 2021

反応が良かったので、構築に必要なデータを全公開します。
Bubblerのみなさん、是非お役立てください！

この記事はBubble旧エディタ時代に書かれています。
エディタの項目や配置に違いがあります。特にプロパティエディタの「Conditional」タブの位置が旧エディタでは真ん中に配置されていますのでご注意ください。

【10種類】挙動確認はこちらからお試しいただけます

https://go-for-it.bubbleapps.io/version-test/button_challenge

ユーザー名：username
パスワード：password

Contents

文字が広がったり、斜めになったり
角丸
閉じたり、開いたり
線が引かれる
ボタンみたいでしょ
Bubbleで作るコード無しボタン、今後も研究します♪

文字が広がったり、斜めになったり

マウスオーバーをすると
・HOVERの文字がCLICK MEに変化
・文字サイズ若干拡大
・文字間のスペースも開く

マウスオーバーをすると
・ボタンが斜めに
・HOVERの文字がHA HA HAに変化
・文字サイズ若干拡大
・文字間のスペースも開く

角丸

マウスオーバーをすると
・ボタンが角丸に
・背景と文字色逆転

マウスオーバーをすると
・右上と左下だけ角丸
・背景と文字色逆転

✔︎ポイント
はじめにAppearanceで「Define each border independently」を設定しておくこと。
そうすることで、Conditionalで4箇所の角を別々に設定が可能になります！

閉じたり、開いたり

マウスオーバーをすると
・左右上下から背景が黒くなる
・背景と文字色逆転

✔︎ポイント
Border widthの幅を太くする、併せてTransitionsを入れることで徐々に背景が黒くなるように見せている。
上のBorder widthが太くなり、文字もその分下がってしまうのを解消するため、Line spacingを初期「1」→「0.1」に変更。

マウスオーバーをすると
・中央から背景が白くなる
・背景と文字色逆転

✔︎ポイント
一つ前の上下左右から背景が黒くなるの逆
初期の背景は Border width40で作成し、マウスオーバーで 2に細くしている。
Border width（上からの）が太いため、文字位置が中央に来るように0.1に調整。
マウスオーバーでLine spacingを1に戻している。

線が引かれる

マウスオーバーをすると
・右線→上線の順にボーダーラインが引かれる

✔︎ポイント
始めに左と上の線も背景と同じ色で引いておく（見た目には同色なので線が無いように設定）
Transitionsで時差をつけることにより、右線が先に、その次に上線が引かれたように見せている。Step-endで、その秒数分遅れて開始される。

マウスオーバーをすると
・右線→下線→左線→上線の順にボーダーラインが引かれる

✔︎ポイント
一つ前と原理は同じ。
始めに背景と同じ色で Border Colorを付けておく。
Define each border independentlyで設定をしておくことで、各線に指定が可能になる。
マウスオーバー時にTransitionsで時差で線に色をつけ、順番に線が引かれたように見せている。