Wraptas機能デモ用サイト/Linkをボタンっぽくするデザイン
セクションカレンダー
セクションカレンダー
cover image
Wraptas機能デモ用サイト/Linkをボタンっぽくするデザイン

Linkをボタンっぽくするデザイン

ソーシャルリンクなどをボタンっぽくするデザインに変更したい場合のサンプルを作成しました。
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">
HTML
 
サンプルにないアイコンを利用したい場合にはこちらからアイコンを探して、デベロッパーツイールでアイコン詳細画面で適用されている文字コードをコピーして利用してください。
 
サンプルの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;
}
CSS

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;
}
CSS

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;
}
CSS

Instagramのリンクサンプル

Instagram
#block-5743003a3d3446d38750a3305716c7cc .notion-link {
  font-family: ForkAwesome;
  background: radial-gradient(
    circle at 30% 140%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  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-5743003a3d3446d38750a3305716c7cc .notion-link:hover {
  opacity: 0.75;
}
#block-5743003a3d3446d38750a3305716c7cc .notion-link:before {
  content: "\f16d";
  font-size: 1.2em;
  margin-right: 8px;
}
CSS

カラム表示サンプル

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

@media (max-width: 760px) {
  #block-beafca67e8fc481baef3323d67cf68a2 { /* カラムを囲っている notion-row のBlockId */
    flex-direction: row;
  }
  #block-beafca67e8fc481baef3323d67cf68a2 .notion-column {
    width: 33% !important;
  }
  #block-beafca67e8fc481baef3323d67cf68a2 .notion-spacer {
    display: none;
  }
  #block-eff60c25ac07432fb13650a995da42c4 .notion-link, { /* 各リンクのBlockId */
  #block-ac295c17a2234bd8a41a0cd8175c7d31 .notion-link,
  #block-795d1d567db248c09c1efdeb176bedf0 .notion-link {
    font-size: 0;
    height: 64px;
    width: 64px;
  }
  #block-eff60c25ac07432fb13650a995da42c4 .notion-link:before,
  #block-ac295c17a2234bd8a41a0cd8175c7d31 .notion-link:before,
  #block-795d1d567db248c09c1efdeb176bedf0 .notion-link:before {
    font-size: 1.5rem;
    margin: 0;
  }
}
CSS
 
 
Twitterでシェア