Customize Button Style

You can customize the Crossmint Button to match your NFT drop website's style and brand.

Crossmint offers two different ways to integrate our buy button into your website:

Customization is slightly different depending on which one you're using, so choose the correct one.


Dark and Light Modes Included

The Crossmint button includes dark and light themes out-of-the-box. The dark mode is set by default, but you can change this with the theme prop. Accepted values are dark (default one) and light.
This prop works for both SDKs.

Customizing the React.js Crossmint button

You can add your custom styles to your Crossmint button. Let's take a quick look at how to do it with a real life React.js example:

import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";

export default function Mint() {
    return (

We can see here that we have a React functional component called Mint where we are rendering the CrossmintPayButton component. Notice that we have added a className prop with the custom class name we will use to style our button.

Now lets leverage CSS specificity to overcome Crossmint's default classes. In our stylesheets, we could write:

// styles.css {
    background-color: blueviolet;

And the result would be:




Note that we are using If you were to use only the custom class name (.my-custom-crossmint-button) that may not override the default styles in all cases.

Customizing the VanillaJS Crossmint button

Let 's see an example of how to customize the Crossmint button when using our VanillaJS Client SDK:

    mintConfig='{"type": "candy-machine"}'

Unlike the React.js version of the SDK, use the ordinary class attribute to add a custom class to the Crossmint button.

// styles.css
.my-crossmint-button::part(button) { 
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); 

.my-crossmint-button::part(contentParagraph) { 
    color: white;
    font-size: 1.25rem; 

Notice how we're utilizing the CSS psuedo-element ::part because our VanillaJS Crossmint Button is a web component.
To customize the button itself, use ::part(button) and to customize the text itself use ::part(contentParagraph).

The result will look like the following: