Since publishing our new website, we've gotten a huge number of requests asking how we created buttons within Notion. The trick is using the callout block + some simple, custom CSS.
Step 1
Create your callout block. You can do this by typing /callout, then hitting enter.
Step 2
Add an icon and text to your callout button.
Step 3
Style your callout buttons colors.
Step 4
Use columns to resize your callout buttons.
Step 5
Add your links
Step 6
This is where the Super magic happens, to make these feel like actual buttons. We'll add some simple CSS to modify colors, border radius, and make the entire block clickable by default.
Paste the code below into the snippet injection part of your Super site settings. Things like border radius, backgrounds, and shadows can all be changed to suit your own style.
<style>
.notion-callout {
border-radius: 100px !important;
position: relative !important;
padding: 16px 24px !important;
border: none !important;
}
.notion-callout.bg-purple-light {
box-shadow: 0 10px 20px -10px #516Bbef !important;
background: #516bef !important;
}
.notion-callout.bg-yellow-light {
box-shadow: 0 10px 20px -10px #f0bd66 !important;
background: #f0bd66 !important;
}
.notion-callout.bg-blue-light {
box-shadow: 0 10px 20px -10px #1ea1f1 !important;
background: #1ea1f1 !important;
}
.notion-callout a {
letter-spacing: -0.5px !important;
padding: 0 0 2px 66px !important;
align-items: center !important;
position: absolute !important;
font-weight: 600 !important;
display: flex !important;
border: none !important;
color: #fff !important;
bottom: 0 !important;
right: 0 !important;
left: 0 !important;
top: 0 !important;
}
</style>
The code above will transform this:
Into this:
View a live demo of these buttons here. Custom scripts and styles on your Notion site is still experimental, and only work on our Static site method. Questions? Post up in our community.
Stay Super ⚡️