If you would like to customize the appearance of your buttons, with the code snippets below you can modify them the way you need.
We’ve prepared codes for each button type:
- Common Notion buttons
- Notion form buttons
- CTA buttons
- Copy codes below and paste them into the CSS tab of the Custom code section in your dashboard.
- Then you can edit the vaules (see comments in the code).
Notion buttons:
/* Notion buttons */
.notion-button__content {
border-radius: 25px !important; /* corner radius */
border: 2px solid #1a1a1a !important; /* border thickness and color */
min-width: 140px !important; /* button width */
height: 44px !important; /* button height */
font-size: 16px !important; /* font size */
background: #ffffff !important; /* bg color */
color: #1a1a1a !important; /* text color */
display: inline-flex !important;
align-items: center !important; /* vertical text align: start-center-end */
justify-content: center !important; /* horizontal text align: start-center-end */
}
.notion-button__content:hover {
background: #1a1a1a !important; /* bg hover color */
color: #ffffff !important; /* text hover color */
border-color: #1a1a1a !important; /* border hover color */
}Notion form buttons:
/* Notion form buttons */
.notion-form__submit-btn,
.notion-form button,
button[type="submit"] {
border-radius: 25px !important; /* corner radius */
border: 2px solid #1a1a1a !important; /* border thickness and color */
min-width: 90px !important; /* button width */
height: 28px !important; /* button height */
font-size: 16px !important; /* font size */
background: #ffffff !important; /* bg color */
color: #1a1a1a !important; /* text color */
display: inline-flex !important;
align-items: center !important; /* vertical text align: start-center-end */
justify-content: center !important; /* horizontal text align: start-center-end */
}
.notion-form__submit-btn:hover,
.notion-form button:hover,
button[type="submit"]:hover {
background: #1a1a1a !important; /* bg hover color */
color: #ffffff !important; /* text hover color */
border-color: #1a1a1a !important; /* border hover color */
}CTA buttons:
/* CTA buttons */
.super-navbar__cta,
.super-navbar__cta > a,
.notion-navbar__cta,
a[data-test="cta-button"] {
border-radius: 25px !important; /* corner radius */
border: 2px solid #1a1a1a !important; /* border thickness and color */
min-width: 65px !important; /* button width */
height: 35px !important; /* button height */
font-size: 16px !important; /* font size */
background: #ffffff !important; /* bg color */
color: #1a1a1a !important; /* text color */
display: inline-flex !important;
align-items: center !important; /* vertical text align: start-center-end */
justify-content: center !important; /* horizontal text align: start-center-end */
}
.super-navbar__cta:hover,
.super-navbar__cta > a:hover,
.notion-navbar__cta:hover,
a[data-test="cta-button"]:hover {
background: #1a1a1a !important; /* bg hover color */
color: #ffffff !important; /* text hover color */
border-color: #1a1a1a !important; /* border hover color */
}