How to Turn a Callout into a CTA Button

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;
color:white;
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.

.notion-callout.bg-blue-light {
    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;
}

.notion-callout.bg-blue-light {
    background: #4EACAA !important; /* CHANGE THE BUTTON COLOR HERE */
    box-shadow: none !important;
    color: #fff !important;
}

.notion-callout.bg-blue-light:hover {
    box-shadow: 0 20px 30px -10px rgba(0,0,0,0.1) !important;
}

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

.notion-callout__icon,
.notion-callout__icon div,
.notion-callout__icon img {
    max-width: auto !important;
    min-width: auto !important;
    height: 20px !important;
    width: 20px !important;
}

.notion-callout.bg-blue-light p {
  margin-left:12px !important;
  font-size: 18px !important;
}

.notion-callout.bg-blue-light .notion-semantic-string .link {
    padding: 16px 32px 17px !important;
    display: inline-block !important;
    white-space: pre !important;
    font-weight: 700 !important;
    font-size:28px;
    border: none !important;
    opacity:1 !important;
}

.notion-callout.bg-blue-light .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.