Buttons are one of the easiest ways to make your website feel more polished and interactive. With custom CSS, you can change their shape, add animations, create colorful gradients, and even include icons to match your site's branding.
Before proceeding, make sure you have an active subscription for this to work on live site. Otherwise, it will only show on dashboard preview.
In this guide, you'll learn how to:
Create rounded buttons
Add hover animations
Apply gradient backgrounds
Add icons to buttons
Note: Add the CSS snippets below to Code → CSS.
Create Rounded Buttons
Rounded buttons give your website a cleaner, more modern appearance.
a.notion-link.notion-button__content {
border-radius:49px !important;
background:#023020 !important;
color: #FFFFFF!important;
font-weight: 500 !important;
text-decoration: none !important;
transition: background .2s ease-in-out !important;
}
Result
Fully rounded (pill-shaped) buttons
Works across your site
Great for modern designs
Outlined Button
For an Outlined Button, you can keep the same structure but replace the filled background with a transparent one and use a border.
Create a minimal button with a transparent background and colored border.
Code>CSS
a.notion-link.notion-button__content {
border: 2px solid #023020 !important;
border-radius: 49px !important;
background: transparent !important;
color: #023020 !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: all .2s ease-in-out !important;
}
a.notion-link.notion-button__content:hover {
background: #023020 !important;
color: #FFFFFF !important;
}What this does
Creates a transparent button with a dark green outline.
Keeps the button fully rounded using a
49pxborder radius.Changes the text color to match the border.
Fills the button with dark green and changes the text to white on hover for a clear interactive effect.
Gradient Button
Add a vibrant gradient background to make your call-to-action buttons stand out.
Add this to your Code>CSS
a.notion-link.notion-button__content {
border-radius: 49px !important;
background: linear-gradient(135deg, #667EEA, #764BA2) !important;
color: #FFFFFF !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: all .2s ease-in-out !important;
}
a.notion-link.notion-button__content:hover {
background: linear-gradient(135deg, #5A6FE0, #6B4299) !important;
}What this does
Applies a green gradient background to the button.
Keeps the button fully rounded with a
49pxborder radius.Uses white text for improved readability.
Adds a smooth transition between the default and hover states.
Slightly brightens the gradient when users hover over the button.
Lift on Hover
Give your buttons a subtle lift effect when users hover over them. This animation adds depth and provides visual feedback, making your call-to-action buttons feel more interactive and responsive.
Add this to your Code>CSS
a.notion-link.notion-button__content {
border-radius: 49px !important;
background: linear-gradient(135deg, #667EEA, #764BA2) !important;
color: #FFFFFF !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: all .2s ease-in-out !important;
}
a.notion-link.notion-button__content:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
If you want to add some Shadow, you can just update the box-shadow property:
box-shadow: 0 14px 30px rgba(59, 33, 99, 0.6);
Add a Download Icon
Add a download icon before your button text to clearly indicate that clicking the button will download a file or resource. This helps users quickly recognize the button's purpose and improves the overall user experience.
Add this to your Code>CSS:
a.notion-link.notion-button__content::before {
content: "⬇";
margin-right: 8px;
font-size: 0.9em;
}
Alternative Icons
You can swap the content value with other Unicode icons:
Icon | CSS |
⬇ |
|
↓ |
|
📥 |
|
⤓ |
|
⇩ |
|
Arrow Icon
Add an arrow icon to your button to emphasize navigation or encourage users to take action. It's a simple way to make call-to-action buttons feel more engaging and intuitive.
Add this to your Code>CSS:
a.notion-link.notion-button__content::after {
content: "→";
margin-left: 8px;
transition: transform .2s ease-in-out;
}
a.notion-link.notion-button__content:hover::after {
transform: translateX(4px);
}