Adding buttons to your site is an important part of engaging users and prompting action, like signups or purchase.

Making a button from a callout

Here is a way to turn a callout into a button using some Custom CSS code.

First, in Notion:

  1. Add a callout block

  2. Add the text for the button label

  3. Select that text and make it a link, and add the URL

Next, in Super:

  1. Add this CSS code to the Code > CSS section of your site's dashboard and save.

/* 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 span .notion-link {
border-radius: 0px;!important;
background-color: #DA0606;
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;
text-align: center;

Adding some button styling goodness

  1. Make the callout have a light blue background, then the following CSS code will style this into a button in Super.

  2. Next, in Super add the following CSS code to the Code > CSS section of your site's dashboard and save. {
box-shadow: 0 20px 30px -10px rgb(0,0,0,0.2) !important;
letter-spacing: -0.4px !important;
border-radius: 100px !important;
align-items: center !important;
width: fit-content !important;
position: relative !important;
font-weight: 600 !important;
border: none !important;

.notion-callout:hover {
box-shadow: 0 20px 30px -10px rgba(0,0,0,0.3) !important;

.notion-callout:active {
box-shadow: 0 20px 30px -10px rgb(0,0,0,0.2) !important;
transform: scale(0.96) !important;
} {
background: #4EACAA !important; /* CHANGE THE BUTTON COLOR HERE */
box-shadow: none !important;
color: #fff !important;
} {
box-shadow: 0 20px 30px -10px rgba(0,0,0,0.1) !important;

.notion-callout__icon {
pointer-events: none !important;

.notion-callout__icon div,
.notion-callout__icon img {
max-width: auto !important;
min-width: auto !important;
height: 20px !important;
width: 20px !important;
} p {
margin-left:12px !important;
font-size: 18px !important;
} .notion-semantic-string .link {
padding: 16px 32px 17px !important;
display: inline-block !important;
white-space: pre !important;
font-weight: 700 !important;
border: none !important;
opacity:1 !important;
} .notion-semantic-string .link:hover {
border: none !important;

The button will appear like so:

You can edit the code above to change the color of the button.

Did this answer your question?