Platform concepts
JavaScript
Troubleshooting
Reference
Customization
Customize the Canva Button with the JavaScript API.
If you're using the JavaScript API, you have a lot of control over how the Canva Button looks and feels. This page provides guidelines for creating a Button from scratch.
Themes and sizes
You can style the Button to align with the look and feel of your website, but Canva strongly recommends taking inspiration from the HTML API's themes. These themes are suitable for a variety of websites, while retaining the unique and familiar Canva style.
You can view the CSS for these themes on CodePen:
Font styles
For the Button, Canva recommends using the Open Sans font. If your page doesn't use Open Sans, add it to the page with Google Fonts:
1
<link
2
href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];600&display=swap"
3
rel="stylesheet"
4
/>
Copied!
The following snippet demonstrates how to apply the font to the button:
1
.canva-design-button {
2
font-family: "Open Sans", sans-serif;
3
font-size: 16px;
4
font-weight: 600;
5
line-height: 1.6;
6
}
Copied!
Notes
- Include normal (400) and semi-bold (600) font weights.
- If necessary, include non-Latin characters (for example, Cyrillic).
- For the
tinysize variation, use the normal font-weight. - For all other size variations, use the semi-bold font weight.
Button text
If the type of design that users create with the Button is implied by its surroundings, Canva recommends using the default text Design with Canva. If not, using a longer call-to-action gives users more context, such as:
- Design an invitation
- Create your business card
- Create a cover photo for your property
- Design your logo
Using the Canva logo
The type of Canva logo to be used in the Button depends on the theme you choose for the Button. Please use the logo files provided here in SVG and PNG formats, as they're tailored to the different themes and sizes:
Last modified 7mo ago
Copy link