Customize the appearance of your Notion buttons to better match your website's branding and design. With a few CSS snippets, you can create rounded buttons, apply gradient backgrounds, add hover effects, display icons, and more.

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 49px border 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 49px border 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:

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);}