Add stylized buttons to your Super site

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.

image

Step 2

Add an icon and text to your callout button.

image

Step 3

Style your callout buttons colors.

image

Step 4

Use columns to resize your callout buttons.

image

Step 5

Add your links

image

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 #516bef !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:

image

Into this:

image

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 ⚡️

Copied