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.
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 tiny size 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: