Skip to main content
All CollectionsWidgets and Advanced How-to's
Adding simple buttons using Bold Text Links
Adding simple buttons using Bold Text Links
Cam Incoll avatar
Written by Cam Incoll
Updated over 2 months ago

Add this code to the Code > CSS section of your site to turn Bold Text links into Clickable buttons on your site.

/* 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-open-padding: 10px 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;
}

/* Color-based link variations with borders */
.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-red strong .notion-link,
.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-red .notion-link strong {
    border: 2px solid var(--color-bg-red) !important;
    background: none !important;
    color: var(--color-bg-red) !important;
    padding: var(--cta-open-padding) !important;
}

.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-blue strong .notion-link,
.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-blue .notion-link strong {
    border: 2px solid var(--color-bg-blue) !important;
    background: none !important;
    color: var(--color-bg-blue) !important;
    padding: var(--cta-open-padding) !important;
}

.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-brown strong .notion-link,
.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-brown .notion-link strong {
    border: 2px solid var(--color-bg-brown) !important;
    background: none !important;
    color: var(--color-bg-brown) !important;
    padding: var(--cta-open-padding) !important;
}

.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-orange strong .notion-link,
.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-orange .notion-link strong {
    border: 2px solid var(--color-bg-orange) !important;
    background: none !important;
    color: var(--color-bg-orange) !important;
    padding: var(--cta-open-padding) !important;
}

.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-yellow strong .notion-link,
.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-yellow .notion-link strong {
    border: 2px solid var(--color-bg-yellow) !important;
    background: none !important;
    color: var(--color-bg-yellow) !important;
    padding: var(--cta-open-padding) !important;
}

.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-green strong .notion-link,
.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-green .notion-link strong {
    border: 2px solid var(--color-bg-green) !important;
    background: none !important;
    color: var(--color-bg-green) !important;
    padding: var(--cta-open-padding) !important;
}

.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-purple strong .notion-link,
.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-purple .notion-link strong {
    border: 2px solid var(--color-bg-purple) !important;
    background: none !important;
    color: var(--color-bg-purple) !important;
    padding: var(--cta-open-padding) !important;
}

.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-pink strong .notion-link,
.notion-root .notion-text.notion-text__content.notion-semantic-string span.highlighted-color.color-pink .notion-link strong {
    border: 2px solid var(--color-bg-pink) !important;
    background: none !important;
    color: var(--color-bg-pink) !important;
    padding: var(--cta-open-padding) !important;
}
/* End of Button code */

Did this answer your question?