こちらのボタンはCSSを編集する必要がありますが、CSS不要でリンクを追加できる機能を追加しましたので、こちらをご覧ください。

リンクボタン機能の使い方

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

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

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

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

<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/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リンクのサンプル