Add this code to the Code > CSS section of your site to turn Bold Text links into Clickable buttons on your site.
:root {
/* CTA button styles */
--cta-padding: 12px 16px!important;
--cta-border-radii: 10px!important;
--cta-color-text: white !important;
--cta-color-bg: lightblue !important; /* default if no background set */
}
.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 {
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: 0px solid !important;
width: fit-content !important;/* for dynamic sizing */
/* width: 100% !important; /* for full column sizing */
}
.notion-root .notion-text .notion-text__content .notion-semantic-string span strong .notion-link:hover,
.notion-root .notion-text .notion-text__content .notion-semantic-string span .notion-link strong: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 strong: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) {
background: none !important;
}