ソーシャルリンクなどをボタンっぽくするデザインに変更したい場合のサンプルを作成しました。

Notionコンテンツ自体は通常のリンクに設定していただいて、Block IDを指定してCSSを当てていきます。

ソーシャルアイコン自体は Fork Awesome というプロジェクトを利用します。

そのため下準備として、管理画面のデータ編集から次のコードを追加してアイコンを利用出来る状態にしてください。

<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css>" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">

サンプルにないアイコンを利用したい場合にはこちらからアイコンを探して、デベロッパーツイールでアイコン詳細画面で適用されている文字コードをコピーして利用してください。

Fork Awesome Icons

サンプルのBlock IDは適宜ご自身のリンクのIDと差し替えてください。

YouTubeリンクのサンプル

YouTube

#block-eb5fbeffdaee4431becd31266d990657 .notion-link {
  font-family: ForkAwesome;
  background-color: #ff0202;
  border-radius: 64px;
  border: none;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  width: 220px;
  box-sizing: border-box;
  font-weight: bold;
  opacity: 1;
  margin: 0 auto;
}
#block-eb5fbeffdaee4431becd31266d990657 .notion-link:hover {
  opacity: 0.75;
}
#block-eb5fbeffdaee4431becd31266d990657 .notion-link:before {
  content: "\\f16a";
  font-size: 1.2em;
  margin-right: 8px;
}

Twitterリンクのサンプル

Twitter

#block-0c82149ac3e140929a69f928d3242b5d .notion-link {
  font-family: ForkAwesome;
  background-color: #1da1f2;
  border-radius: 64px;
  border: none;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  width: 220px;
  box-sizing: border-box;
  font-weight: bold;
  opacity: 1;
  margin: 0 auto;
}
#block-0c82149ac3e140929a69f928d3242b5d .notion-link:hover {
  opacity: 0.75;
}
#block-0c82149ac3e140929a69f928d3242b5d .notion-link:before {
  content: "\\f099";
  font-size: 1.2em;
  margin-right: 8px;
}

Facebookリンクのサンプル

Facebook

#block-0c82149ac3e140929a69f928d3242b5d .notion-link {
  font-family: ForkAwesome;
  background-color: #3b5998;
  border-radius: 64px;
  border: none;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  width: 220px;
  box-sizing: border-box;
  font-weight: bold;
  opacity: 1;
  margin: 0 auto;
}
#block-0c82149ac3e140929a69f928d3242b5d .notion-link:hover {
  opacity: 0.75;
}
#block-0c82149ac3e140929a69f928d3242b5d .notion-link:before {
  content: "\\f230";
  font-size: 1.2em;
  margin-right: 8px;
}

Instagramのリンクサンプル