Customize Button Style

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

• React.js, Next.js SDK
• VanillaJS SDK

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 CrossmintPayButton component. It only takes a few css rules to make it happen.

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

export default function Mint() {
    return (
        <div>
            <CrossmintPayButton    
                clientId="_YOUR_CLIENT_ID"
                className="xmint-btn"
            />
        </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:

button.xmint-btn {
    background-color: blueviolet;
}

And the result would be:

Changing the button text (reactjs)

button.xmint-btn span {
     display: none;
}
button.xmint-btn:after {
    content: "Custom Buy Text";
    color: white; 
}

This will result in a button with custom text:

🚧

Important

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

Customizing the Vanilla JS 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="xmint-btn"
/>

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

.xmint-btn::part(button) { 
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); 
}

.xmint-btn::part(contentParagraph) { 
    color: white;
    font-size: 1.25rem; 
}

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

The result will look like the following:

Changing the button text (vanilla js)

.xmint-btn::part(contentParagraph) {
  display: none;
}
.xmint-btn::part(button):after {
  content: "Custom Buy Text"
}

This will result in a button with custom text: