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 (
        <div>
            <CrossmintPayButton    
                clientId="7e94eb71-06c0-447f-9272-677416fee1d5"
                className="my-custom-crossmint-button"
            />
        </div>
    );
}

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
button.my-custom-crossmint-button {
    background-color: blueviolet;
}

And the result would be:

294294

🚧

Important

Note that we are using button.my-custom-crossmint-button. 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:

<crossmint-pay-button 
    clientId="<YOUR_CLIENT_ID>"
    mintConfig='{"type": "candy-machine"}'
    class="my-crossmint-button"
</crossmint-pay-button>

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:

10051005