サポートアクションのフローティングボタンは設定から位置を比較的自由に調整できますが、それでもボタンが邪魔になってしまうというケースがあります。
RightSupportのサポートアクション編集画面のように、フローティングボタンを常設している場所にコンテンツが出てくるような場合が当てはまります。
このアンサーでは、下記の画像のように「通常時は画面の端に隠し、ボタンがホバーされたら（マウスポインタがボタンの上に乗ったら）要素全てを表示する」方法を記載します。

尚、本Tipsは主にPCユーザーが多い方向けのものになるためご注意ください。スマホ・タブレットではホバーという概念がなくなるためです。

以下に記載するCSSを詳細設定＞このステップのカスタムCSSに入れることで、そのサポートアクションでだけ見た目を調整することができます。
ブランド設定に登録した場合、全てのサポートアクションに変更が反映されます。
※カスタムCSSの設定方法はこちらをご確認ください

通常時（非ホバー時）

ホバー時

ホバー時に表示するフローティングボタンを作る方法

サポートアクション編集画面に表示されるフローティングボタンと同様、右下に設置する前提で記載します。
位置や余白などはお好みに合わせ調整ください。

ボタンのタイプはアイコンでも可能ですが、隠した際の見た目に違和感が出る可能性があるため上記のようにテキストを入れることを推奨します。
ボタンの設定ができたら詳細設定＞カスタムCSSから、以下のCSSを追加します。

#rs_sa .c-floatingButton {
  transform: translateX(88%);/* ボタンの全体の何%を隠すか。適宜調整してください */
  transition: 0.4s;/* アニメーションにかかる時間。適宜調整してください */
}
#rs_sa .c-floatingButton:hover {
  transform: translateX(0);
}
#rs_sa .c-buttonText {
  padding: 8px 12px;/* ボタン内の余白。適宜調整してください */
}

以下でそれぞれのCSSについて簡単に解説します。

#rs_sa .c-floatingButton
ボタンが隠れている際のスタイルを指定しています。
transformプロパティの「translateX」によってボタンの横幅のどの程度まで隠すかを指定することができます。50%を指定するとボタンが半分隠れ、75%を指定すると3/4が隠れます。自然な見た目になるよう調整ください。
transitionプロパティはアニメーションの時間を指定できます。長くするとホバーした際に全体が出てくるまでにかかる時間が伸びるため、0.4s~0.8sの間で調整するのが自然です。

#rs_sa .c-floatingButton:hover

ボタンがホバーされた際のスタイルを指定しています。
ここではボタンの全体を表示するため、0を指定しています。

#rs_sa .c-buttonText

ボタンの中の余白を指定しています。
このCSSは任意のため、不要であれば削除していただいて問題ありません。
利用する場合、自然な見た目になるよう値を調節してください。

以上が今回のレシピになります。
フローティングボタンは一般的には右下に設置されますが、もし左下などに設置し「画面の左側に隠したい」という場合は、translateXに指定する値を「-88%」のようにマイナスの値を入れてください。