SNS ログインボタン群

解説

これは Google・Apple・X・GitHub の外部アカウントでサインインするための SNS ログインボタン群です。各ボタンは丸いアイコン枠とラベルを横並びにし、Google だけ白背景、ほかはダーク背景という配色で「主たる選択肢」を視覚的に際立たせています。CSS のみで構成され、:hover で枠線や背景がわずかに変化して押せることを伝えます。末尾の「または」区切りは、この下にメール入力フォームを置く前提のデザインです。

使いどころ

• ログイン・新規登録画面の上部
• 会員登録の手間を減らしたいサービス
• パスワード管理を外部に委ねたいアプリ

実装時の注意は、ここに置かれた文字アイコンは仮の表現だという点です。本番では各サービスの公式ロゴガイドラインに沿った正規アイコンへ差し替えてください。色は .oa-btn--dark の背景値で一括変更でき、提供する認証プロバイダの数に合わせてボタンを増減するだけで構成を調整できます。実際の認証処理は別途バックエンドとの連携が必要で、このスニペットは見た目部分のみを担います。