Optimizing your website with Call-to-Action (CTA) buttons is crucial for generating leads. This article shows how to create CTA buttons within Notion's constraints and how Super can enhance them to maximize lead generation potential.
The primary purpose of your Notion website is to generate leads for your business. It doesn’t matter what products or services you sell, or how big or small your business is - you want a relevant audience to land on your website pages, check out your content, and eventually convert into paying customers.
Getting visitors is one thing but to turn them into customers, you must optimize your website for conversions. Conversion Rate Optimization (CRO), in simple terms, is the process of making the transition from visitor to customer as smooth as possible.
It involves planning milestones and the path between them.
One of the most important tools of CRO is the Call-to-Action (CTA) button. CTAs, when introduced at the right places with the right text give the reader the impetus to click on them. By linking the button to an important page like your contact page or signup page, you get visitors to the stage where they must decide if they want to begin an association with your business.
So, in effect, a website that is not optimized with the right CTAs will not generate leads to its best potential. While Notion helps you set up a website, it doesn’t offer the features you need to create the perfect CTA buttons. In this article, we will show you how to create one within the limitations of Notion. We will also cover how Super can take the CTA buttons to the next level.
Here are the 5 steps to create a button on Notion:
1. Add a Callout block to your Notion page
The Callout block is the closest thing to a button in Notion. We will show you how to customize it and turn it into a functional CTA button.
Open the Notion page and scroll to the point where you want to add the clickable button.
Hover over the empty block there to find the ➕sign. Click on it to see the complete list of all the blocks that Notion supports.
Keep scrolling till you find the Callout block and click on it.
Notion inserts the Callout block as seen in the above image.
Another way to add the block is by typing /callout. As soon as you start typing that, Notion floats the block type to the top and you can click on it to select it.
2. Change the color of the Callout block
You want the CTA button to stand out in contrast from the rest of the page. By choosing the right color, you can ensure that the button grabs more eyeballs and thus generates more clicks.
For now, the Callout block is the CTA button. To change its color, click on the Drag icon that shows up when you hover over the block. Notion pops up a list of actions you can take.
Click on Color to see color options available for the text in and background of the Callout. Select the combination that makes your CTA stand out.
You can also change the icon by clicking on the current one. Choose one that aligns with the CTA text. We will talk more about it in the subsequent sections.
3. Center align the Callout block
The Notion custom buttons attracts the most attention when it appears at the center of the screen. However, there is no straightforward way to center align a block on Notion.
There is a workaround though.
Even though it’s limited in its page layout capabilities, Notion makes dragging and dropping blocks easy. You can easily move a block to the left, right, above, or below another.
By adding two empty blocks, one to the left and the other to the right of the Callout block, you can align it center.
An easier way to center align the clickable Notion button is by creating columns. You can do that with the “columns” block in Notion. You can initiate it by typing “/columns” right above the call-out block. With that, Notion will display the option to select from 2-5 columns. Select the option - “3 Columns.”
This prompts Notion to create a block with three equal-width columns, with the one in the center placed exactly in the middle of the page. Drag and drop the call-out block into column #2 to center align it.
Yet another way to center align the callout block is by using code.
The above image shows what the Callout block looks like when snuggled between two blocks.
It already looks like a CTA block. Let’s make it clickable.
4. Add the CTA text
The CTA text is what gently nudges the readers to take action. It tells readers what you want them to do.
But today, with so much marketing everywhere, no one wants to be “sold” anything. They want to make informed decisions and dislike pushy marketing tactics. It may sound counterintuitive, but your CTA button must give them the option to not click as well. This means, CTAs like Click here or Click Now are a big NO.
Instead, try to align the CTA button with the visitor’s intent. This tactic helps the content segue into the CTA button while progressing the narrative in the terms of the customer journey.
For example, if someone visited a page with the intent to learn how to create a Notion website, the CTA should read Get started for free or Create your Notion website fast. The CTA talks about the Notion website creation process, which aligns with the visit intent, but words like - free and fast imply that the next page has something extra that the visitor might be interested in.
5. Add Notion Button Link
The CTA button must guide visitors to the next milestone in their journey to becoming a customer. It must take them to another page that offers the new information they seek after consuming the content on the current one.
For example, a visitor on a product page on Amazon would want to explore one of the two options - adding the product to the cart and exploring similar products. Amazon has CTAs catering to both avenues.
You should not link the CTAs to a money page every time. You must do that only when the money pages naturally fit the flow, only when you are sure that the visitor has hit all the previous milestones in their journey and the money page is the only one left.
Once you are sure about the page that the CTA button links to, hyperlink the CTA text on Notion in two simple steps:
- Highlight the CTA text to see the new pop-up and click on Link.
- Paste the link.
That’s it! Your CTA button is ready.
But it doesn’t look attractive, it doesn’t really stand out from the page either. In short, it doesn’t look click-worthy.
Let’s change that with Super.
6. Style the action button with Super
Super helps you create Notion buttons that people want to click. It adds finesse and offers design features that make the CTA button truly stand out.
Let’s explore how Super can turn your Notion button from this:
To this:
/* Turn a single line callout block into a button (Entire block is clickable) */
.notion-callout {
position: relative!important;
}
.notion-callout .notion-callout__content .notion-semantic-string .notion-link {
position: absolute!important;
height: 100%!important;
width: 100%!important;
top: 0!important;
left: 0!important;
right: 0!important;
bottom: 0!important;
padding: 15px!important;
padding-left: 50px!important;
border: none!important;
}It’s a simple three-step process:
1. After you set up your website on Super, click on the Code option in the dashboard.
2. Super will open the Global site code view.
3. Add the code to the CSS section and hit the Save button.
And it’s done! It’s easy to create aesthetic buttons on Notion with Super.
Alternative method for creating a Notion button with Super
You can create a button simply by making hyperlinked text bold and adding custom CSS to your Super dashboard. This is a global change, so you need to be careful when making hyperlinked text bold on any page of your site because it will convert into a button.
Here’s how it works:
- Select all the text in the block (don’t select the block itself; just select the text)
- Make the text bold
- Set a background color
- Paste the link
Here are some examples:
This is a link - as the hyperlinked text is not bold
This is a button - since the hyperlinked text is bold
Furthermore, these won’t be buttons:
This is a link with a background
But these will be buttons because they are bold:
This is a bold link with no background
This is a bold link with a background
However, This is bold but not a link. Highlighting text alone won’t turn it into a button, you need to hyperlink it.
- Finally, add the following code to your Notion site by visiting the ‘Code’ section of your Super dashboard, opening the CSS tab, and pasting the code into it.
/* Button code
This will set any single line bold link with a background color to be a button.
To use, select all the text in the block (dont select the block itself, just select the text) and make it bold, set a background color, and paste the link.
*/
:root {
/* CTA button styles */
--cta-padding: 12px 16px!important;
--cta-border-radii: 30px!important;
--cta-color-text: #fff !important;
--cta-color-bg: #ccc !important; /* default if no background set */
/* Set default colors in case theme is not applied - if you prefer not to use the Super Theme Designer for the colors, then you can uncomment this code to set button colors
--gray-h: 36;
--gray-s: 2%;
--brown-h: 19;
--brown-s: 31%;
--orange-h: 30;
--orange-s: 87%;
--yellow-h: 38;
--yellow-s: 62%;
--green-h: 149;
--green-s: 31%;
--blue-h: 202;
--blue-s: 53%;
--purple-h: 274;
--purple-s: 32%;
--pink-h: 328;
--pink-s: 48%;
--red-h: 2;
--red-s: 62%; */
/* Change the luminosity - this changes the brightness / intensity of the buttons based on the Notion colors set in the Super Theme Designer */
--color-lum: 40%;
/* Set the background colors for buttons */
--color-bg-gray:hsl(var(--gray-h),var(--gray-s), var(--color-lum))!important;
--color-bg-brown:hsl(var(--brown-h),var(--brown-s), var(--color-lum))!important;
--color-bg-orange:hsl(var(--orange-h),var(--orange-s), var(--color-lum))!important;
--color-bg-yellow:hsl(var(--yellow-h),var(--yellow-s), var(--color-lum))!important;
--color-bg-green:hsl(var(--green-h),var(--green-s), var(--color-lum))!important;
--color-bg-blue:hsl(var(--blue-h),var(--blue-s), var(--color-lum))!important;
--color-bg-purple:hsl(var(--purple-h),var(--purple-s), var(--color-lum)) !important;
--color-bg-pink:hsl(var(--pink-h),var(--pink-s), var(--color-lum)) !important;
--color-bg-red:hsl(var(--red-h),var(--red-s), var(--color-lum)) !important;
}
/*Button*/
.notion-root .notion-text .notion-text__content .notion-semantic-string span strong .notion-link,
.notion-root .notion-text .notion-text__content .notion-semantic-string span .notion-link strong, .notion-root .notion-text .notion-text__content .notion-semantic-string span .link, .notion-root .notion-text.notion-text__content.notion-semantic-string .notion-link strong, .notion-root .notion-text.notion-text__content.notion-semantic-string strong .notion-link {
padding: var(--cta-padding)!important;
border-radius: var(--cta-border-radii)!important;
opacity: 1!important;
font-weight: 500!important;
display: inline-flex!important;
justify-content: center!important;
transition: background .2s ease-in-out!important;
background: var(--cta-color-bg)!important;
color: var(--cta-color-text)!important;
margin: 2px!important;
border-bottom: none !important;
width: fit-content !important;/* for dynamic sizing */
/* width: 100% !important; /* for full column sizing */
text-decoration: none !important;
}
.notion-root .notion-text .notion-text__content .notion-semantic-string span .notion-link:hover strong, .notion-root .notion-text .notion-text__content .notion-semantic-string span .link, .notion-root .notion-text.notion-text__content.notion-semantic-string .notion-link:hover strong, .notion-root .notion-text.notion-text__content.notion-semantic-string strong .notion-link:hover {
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3) !important;
transform: scale(1.03) !important;
}
.notion-root .notion-text .notion-text__content .notion-semantic-string span strong .notion-link:active,
.notion-root .notion-text .notion-text__content .notion-semantic-string span .notion-link:active strong, .notion-root .notion-text .notion-text__content .notion-semantic-string span .link:active, .notion-root .notion-text.notion-text__content.notion-semantic-string .notion-link:active strong, .notion-root .notion-text.notion-text__content.notion-semantic-string strong .notion-link:active {
box-shadow: 0 5px 5px -10px rgb(0,0,0,0.2) !important;
transform: scale(0.98) !important;
}
/* Reset the color */
.notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background:has(strong .notion-link), .notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background:has(.notion-link strong),
.notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background:has(.notion-link strong), .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background:has(strong .notion-link) {
background: none !important;
}
/* Button color variations */
.notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-red strong .notion-link, .notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-red .notion-link strong, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-red strong .notion-link, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-red .notion-link strong {
background: var(--color-bg-red) !important;
color: var(--cta-color-text)!important;
}
.notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-blue strong .notion-link, .notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-blue .notion-link strong, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-blue strong .notion-link, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-blue .notion-link strong {
background: var(--color-bg-blue) !important;
color: var(--cta-color-text)!important;
}
.notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-gray strong .notion-link, .notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-gray .notion-link strong, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-gray strong .notion-link, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-gray .notion-link strong {
background: var(--color-bg-gray) !important;
color: var(--cta-color-text)!important;
}
.notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-brown strong .notion-link, .notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-brown .notion-link strong, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-brown strong .notion-link, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-brown .notion-link strong {
background: var(--color-bg-brown) !important;
color: var(--cta-color-text)!important;
}
.notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-orange strong .notion-link, .notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-orange .notion-link strong, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-orange strong .notion-link, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-orange .notion-link strong {
background: var(--color-bg-orange) !important;
color: var(--cta-color-text)!important;
}
.notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-yellow strong .notion-link, .notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-yellow .notion-link strong, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-yellow strong .notion-link, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-yellow .notion-link strong {
background: var(--color-bg-yellow) !important;
color: var(--cta-color-text)!important;
}
.notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-green strong .notion-link, .notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-green .notion-link strong, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-green strong .notion-link, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-green .notion-link strong {
background: var(--color-bg-green) !important;
color: var(--cta-color-text)!important;
}
.notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-purple strong .notion-link, .notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-purple .notion-link strong, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-purple strong .notion-link, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-purple .notion-link strong {
background: var(--color-bg-purple) !important;
color: var(--cta-color-text)!important;
}
.notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-pink strong .notion-link, .notion-root .notion-text .notion-text__content .notion-semantic-string span .highlighted-background.bg-pink .notion-link strong, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-pink strong .notion-link, .notion-root .notion-text.notion-text__content.notion-semantic-string .highlighted-background.bg-pink .notion-link strong {
background: var(--color-bg-pink) !important;
color: var(--cta-color-text)!important;
}
/* End of Button code */How to use linkable buttons in Notion?
The are many use-case in which a clickable button in Notion can direct traffic to a page that has higher potential to convert visitors into client. Here are the different ways you can use Notion buttons:
1. Driving signups
You may have many pages in your Notion website, each attracting traffic from different sources like Google, YouTube, Social Media, etc. But if you do nothing to convert traffic into paying customers for your product, you are leaving money on the table.
Buttons can help you with that. By adding Notion link buttons in the first fold of your informative pages, you can gently guide people to the signup or pricing page where they can make a purchase decision. Make sure you use an apt anchor text like “Free Trial”, “Signup for Free”, etc.
2. Increasing newsletter subscription base
Not all traffic that visits your website converts into clients. In fact, it's a huge success if you can convert even 1% of them! It often needs 3-6 touchpoints with any brand before a customer makes a purchase decision.
99% of all visitors won’t buy the product on the first visit, but that doesn’t mean they never will. You just need to reach out to them in future to increase the number of touchpoints and pique interest. The most affordable way to do that is by getting people to signup to your newsletter. By getting their email details, you can send them more informative content and subtly plug in your product as a solution to their pressing pain points.
Notion CTA buttons can help you get people to visit the signup page and give their information. By using anchor text like - “Sign up for our newsletter”, you can get people to visit the page with the form and submit details. It’s worth noting that driving newsletter subscriptions is beyond just CTA buttons, you might need to create a Notion newsletter site to get strategy and operations together in one place.
3. Getting more client calls and setting up appointments
We have established that Notion CTA buttons play a key role in directing people to your “money” pages. Another use-case in the same theme is generating more calls from the clients. By adding a Notion button that takes people to your “Contact” page or your Calendly account, you encourage people to pick up their phone and call you, or set up some time on your calendar.
4. Showcasing a portfolio
Having clickable buttons is indispensable if you already have a Notion portfolio site. You want visitors to reach the pages where they find your contact information or social media accounts. But before getting to that, people would want to see your portfolio. By adding anchor text - “Access my portfolio” or “See my work”, you can get people to the pages you want.
FAQs
Can the Notion button block be used as an action button?
Notion button block is useful for adding links internal to Notion. They can help you organize your workflows better, but since you can’t link them to external pages, the Notion button feature can not double up as action buttons in Notion.
How is a Notion CTA button different from Notion template button?
A Notion CTA button is a tool that you can add to a Notion page to direct users to another page within the Notion website or any other page on the web. On the other hand, a Notion template button is a Notion block that enables you make replicas of a predefined template.
Where is the template button in Notion?
You can access the template button in Notion by typing “/button” in your Notion page and selecting the “Button” option displayed by Notion.
