【非推奨】Linkをボタンっぽくするデザイン

こちらのボタンはCSSを編集する必要がありますが、CSS不要でリンクを追加できる機能を追加しましたので、こちらをご覧ください。
リンクボタン機能の使い方リンクボタン機能の使い方2022/7/5 6:102022/9/25 9:06
 
ソーシャルリンクなどをボタンっぽくするデザインに変更したい場合のサンプルを作成しました。
Notionコンテンツ自体は通常のリンクに設定していただいて、Block IDを指定してCSSを当てていきます。
ソーシャルアイコン自体は Fork Awesome というプロジェクトを利用します。
そのため下準備として、管理画面のデータ編集から次のコードを追加してアイコンを利用出来る状態にしてください。
Markup
 
サンプルにないアイコンを利用したい場合にはこちらからアイコンを探して、デベロッパーツイールでアイコン詳細画面で適用されている文字コードをコピーして利用してください。
 
サンプルのBlock IDは適宜ご自身のリンクのIDと差し替えてください。

YouTubeリンクのサンプル

CSS

Twitterリンクのサンプル

CSS

Facebookリンクのサンプル

CSS

Instagramのリンクサンプル

CSS

カラム表示サンプル

カラム表示をスマホでも横並びキープ

CSS